您好,欢迎访问一九零五行业门户网

jquery怎么移除选择的行

在前端开发中,我们经常会遇到需要对表格中的数据进行操作的需求。例如,我们可能需要删除某个行或者多个行。在 jquery 中,我们可以使用 remove() 方法来删除 dom 元素,然后通过选择器来选择我们需要删除的元素。下面,我们就来看看具体的实现方法。
通过按钮触发事件在 html 中,我们可以添加一个按钮,当用户点击该按钮时,我们可以执行删除操作。首先,在表格中每一行的最后一列中添加一个删除按钮,并为该按钮添加一个自定义的 data-index 属性,用于标识该按钮所在的行的索引值。
<table id="table">  <thead>    <tr>      <th>id</th>      <th>姓名</th>      <th>年龄</th>      <th>操作</th>    </tr>  </thead>  <tbody>    <tr>      <td>001</td>      <td>张三</td>      <td>22</td>      <td><button class="btn-delete" data-index="0">删除</button></td>      </tr>    <tr>      <td>002</td>      <td>李四</td>      <td>25</td>      <td><button class="btn-delete" data-index="1">删除</button></td>    </tr>    <tr>      <td>003</td>      <td>王五</td>      <td>30</td>      <td><button class="btn-delete" data-index="2">删除</button></td>    </tr>  </tbody></table>
然后,我们可以为这些按钮添加一个事件监听器,当按钮被点击时,我们就可以根据该按钮所在行的索引值来删除对应的行:
$(document).on('click', '.btn-delete', function() {  var index = $(this).attr('data-index');  // 获取该按钮所在行的索引值  $('#table tr').eq(index + 1).remove(); // 删除指定索引的行,注意加一是因为表头占据了第一行});
通过勾选复选框触发事件除了按钮触发事件外,另一个常见的方式就是勾选复选框触发事件。在这种情况下,我们可以在每个行前添加一个复选框,当用户勾选某些复选框后,就可以执行删除操作。
首先,我们需要给每个行前都添加一个复选框,并使用 data-index 属性来标识该复选框所在行的索引值:
<tr>  <td><input type="checkbox" class="check-item" data-index="0"></td>  <td>001</td>  <td>张三</td>  <td>22</td>  <td><button class="btn-delete">删除</button></td></tr><tr>  <td><input type="checkbox" class="check-item" data-index="1"></td>  <td>002</td>  <td>李四</td>  <td>25</td>  <td><button class="btn-delete">删除</button></td></tr><tr>  <td><input type="checkbox" class="check-item" data-index="2"></td>  <td>003</td>  <td>王五</td>  <td>30</td>  <td><button class="btn-delete">删除</button></td></tr>
接下来,我们为表格添加一个 全选 的复选框。当该复选框被勾选时,所有行前的复选框都将被勾选。反之,如果取消 全选 复选框的勾选,则所有行前的复选框也将被取消勾选。
<input type="checkbox" id="check-all">全选
$('#check-all').click(function() {  var ischecked = $(this).prop('checked'); // 获取全选复选框的状态  $('.check-item').prop('checked', ischecked); // 将所有行前的复选框的状态设置为与全选复选框相同});
最后,我们为删除按钮添加一个点击事件监听器。在该事件处理函数中,我们首先获取所有勾选了的复选框所在行的索引值,然后使用 remove() 方法将这些行删除。
$(document).on('click', '.btn-delete', function() {  var $checkeditems = $('.check-item:checked'); // 获取所有勾选了的复选框  var indexes = [];  $checkeditems.each(function() {    indexes.push($(this).attr('data-index')); // 将每个勾选了的行所在索引值添加到数组中  });  $('#table tr').eq(indexes).remove(); // 删除所有勾选了的行});
综上所述,通过以上两种方式,我们可以很方便地实现删除表格中指定的行。
以上就是jquery怎么移除选择的行的详细内容。
其它类似信息

推荐信息