在前端開發中，我們經常會遇到需要對表格中的資料進行操作的需求。例如，我們可能需要刪除某個行或多個行。在 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怎麼移除選擇的行的詳細內容。更多資訊請關注PHP中文網其他相關文章！
