在前端开发中，我们经常会遇到需要对表格中的数据进行操作的需求。例如，我们可能需要删除某个行或者多个行。在 jquery 中，我们可以使用 remove() 方法来删除 dom 元素，然后通过选择器来选择我们需要删除的元素。下面，我们就来看看具体的实现方法。
- 通过按钮触发事件
在 HTML 中，我们可以添加一个按钮，当用户点击该按钮时，我们可以执行删除操作。首先，在表格中每一行的最后一列中添加一个删除按钮，并为该按钮添加一个自定义的 data-index 属性，用于标识该按钮所在的行的索引值。
| ID | 姓名 | 年龄 | 操作 |
|---|---|---|---|
| 001 | 张三 | 22 | |
| 002 | 李四 | 25 | |
| 003 | 王五 | 30 |
然后，我们可以为这些按钮添加一个事件监听器，当按钮被点击时，我们就可以根据该按钮所在行的索引值来删除对应的行：
$(document).on('click', '.btn-delete', function() {
var index = $(this).attr('data-index'); // 获取该按钮所在行的索引值
$('#table tr').eq(index + 1).remove(); // 删除指定索引的行，注意加一是因为表头占据了第一行
});- 通过勾选复选框触发事件
除了按钮触发事件外，另一个常见的方式就是勾选复选框触发事件。在这种情况下，我们可以在每个行前添加一个复选框，当用户勾选某些复选框后，就可以执行删除操作。
首先，我们需要给每个行前都添加一个复选框，并使用 data-index 属性来标识该复选框所在行的索引值：
001 张三 22 002 李四 25 003 王五 30
接下来，我们为表格添加一个 "全选" 的复选框。当该复选框被勾选时，所有行前的复选框都将被勾选。反之，如果取消 "全选" 复选框的勾选，则所有行前的复选框也将被取消勾选。
全选
$('#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(); // 删除所有勾选了的行
});综上所述，通过以上两种方式，我们可以很方便地实现删除表格中指定的行。
