jQ对table表格中的包含checkbox的行进行删除，新增

Tempo lv.1

发布时间：2022-11-06 13:36:25 388

相关标签：

表格内容：

<div class="table-responsive" data-pattern="priority-columns">
 <table id="portMappingTable" class="table vm table-small-font no-mb table-bordered table-striped" style="overflow: auto;">
 <thead>
 <tr>
 <th class="text-center">启用</th>
 <th class="text-center">AI</th>
 <th class="text-center">教育</th>
 <th class="text-center" >服务</th>
 <th class="text-center">医疗</th>
 <th class="text-center">物联网</th>
 <th class="text-center">金融</th>
 <th class="text-center">外贸</th>
 <th class="text-center">公职</th>
 <th class="text-center">公共</th>
 <th class="text-center">开启调查</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td class="text-center">
 input type="checkbox" name="enable" />
 </td>
 <td class="text-center">
 <select id="servetype" name="servetype" style="display: inline-block; vertical-align: middle;">
 <option value="0">TCP</option>
 option value="1">UDP</option>
 <option value="2">TCP & UDP</option>
 </select>
 </td>
 <td class="text-center">
 <input type="text" value="0.0.0.0/0" />
 </td>
 <td class="text-center">
 <input type="text" value="8080" />
 </td>
 <td class="text-center">
 <input type="text" value="" />
 </td>
 <td class="text-center">
 <input type="text" value="8080" />
 </td>
 <td class="text-center">
 <input type="checkbox" value="" />
 </td>
 <td class="text-center">
 <select id="servetype" name="servetype" style="display: inline-block; vertical-align: middle;">
 <option value="0">WAN</option>
 <option value="1">Cellular</option>
 </select>
 </td>
 <td class="text-center">
 <input type="text" value="" />
 </td>
 <td class="text-center">
 <input type="text" value="" />
 </td>
 <td class="text-center">
 <input id="checkbox1" type="checkbox" name="checked" value="" />
 </td>
 </tr>
 </tbody>
 </table>
</div>

根据checkbox勾选的情况删除某一行：

//删除
      $(function(){  
          $("button[name='delete']").click(function() {
              $("input[name='enable']:checked").each(function() { 
                  n = $(this).parents("tr").index();  // 获取checkbox索引值
            console.log(n);
                  $("table#portMappingTable tbody").find("tr:eq("+n+")").remove();
              });
          });
      });

新增某一行：

//添加
      function addPortMapping() {
        $("table#portMappingTable tbody").append(
          `<tr><td class="text-center"><input type="checkbox" name="enable" /></td><td class="text-center"><select id="servetype" name="servetype" style="display: inline-block; vertical-align: middle;"><option value="0">TCP</option><option value="1">UDP</option><option value="2">TCP & UDP</option></select></td><td class="text-center"><input type="text" value="0.0.0.0/0" /></td><td class="text-center"><input type="text" value="8080" /></td><td class="text-center"><input type="text" value="" /></td><td class="text-center"><input type="text" value="8080" /></td><td class="text-center"><input type="checkbox" value="" /></td><td class="text-center"><select id="servetype" name="servetype" style="display: inline-block; vertical-align: middle;"><option value="0">WAN</option><option value="1">Cellular</option></select></td><td class="text-center"><input type="text" value="" /></td><td class="text-center"><input type="text" value="" /></td><td class="text-center"><input  type="checkbox" name="checked" value="" /></td></tr>`
        );
      }

文章来源： https://blog.51cto.com/u_14562672/5802650

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。