代码实现jquery批量删除按钮
时间: 2023-08-02 22:07:30 浏览: 101
JQuery批量删除
可以使用以下代码实现jquery批量删除按钮:
HTML代码:
```
<table>
<thead>
<tr>
<th><input type="checkbox" id="checkAll"></th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="checkItem"></td>
<td>John Doe</td>
<td>john@example.com</td>
<td><button class="btnDelete">Delete</button></td>
</tr>
<tr>
<td><input type="checkbox" class="checkItem"></td>
<td>Jane Doe</td>
<td>jane@example.com</td>
<td><button class="btnDelete">Delete</button></td>
</tr>
<tr>
<td><input type="checkbox" class="checkItem"></td>
<td>Bob Smith</td>
<td>bob@example.com</td>
<td><button class="btnDelete">Delete</button></td>
</tr>
</tbody>
</table>
```
jQuery代码:
```
$(document).ready(function() {
// Check all checkboxes when checkAll checkbox is clicked
$('#checkAll').click(function() {
$('.checkItem').prop('checked', $(this).prop('checked'));
});
// Delete selected rows when btnDelete button is clicked
$('.btnDelete').click(function() {
if (confirm('Are you sure you want to delete selected rows?')) {
$('.checkItem:checked').each(function() {
$(this).closest('tr').remove();
});
}
});
});
```
这段代码会为表格中每个删除按钮添加点击事件,并提示用户是否确定删除选定的行。如果用户点击“确定”,则会遍历选中的复选框,并删除相应的行。使用全选复选框可以方便地选择所有行。
阅读全文