代码实现jquery批量删除按钮
时间: 2023-08-02 11:07:30 浏览: 108
可以使用以下代码实现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();
});
}
});
});
```
这段代码会为表格中每个删除按钮添加点击事件,并提示用户是否确定删除选定的行。如果用户点击“确定”,则会遍历选中的复选框,并删除相应的行。使用全选复选框可以方便地选择所有行。
阅读全文
相关推荐













<script> //反选 function changeCheck() { // 获取所有的复选框元素 var checkboxs = document.getElementsByTagName('input'); // 遍历所有复选框 for (var i = 0; i < checkboxs.length; i++) { // 如果当前元素是复选框,而且它的类型是checkbox if (checkboxs[i].type == 'checkbox') { // 判断当前复选框是否选中 if (checkboxs[i].checked) { // 如果选中,就取消选中 checkboxs[i].checked = false; } else { // 如果没有选中,就选中它 checkboxs[i].checked = true; } } } } $(function() { // 删除功能 $(".delete_item").click(function() { $(this).closest("tr").remove(); }); // 批量删除功能 $("#deleteAll").click(function() { $(".check_item:checked").each(function() { $(this).closest("tr").remove(); }); }); }); </script> </head> <body> <button type="checkbox" id="allsel" onclick="changeCheck(this)">反选</button> 用户ID 爱好 家庭住址 操作 <input type="checkbox" class="check_item"> 1 跑步 江苏省无锡市 <button class="delete_item">删除</button> <input type="checkbox" class="check_item"> 2 打球 江苏省南京市 <button class="delete_item">删除</button> <input type="checkbox" class="check_item"> 3 跳舞 安徽省合肥市 <button class="delete_item">删除</button> <button class="deleteAll">批量删除</button> 怎么可以批量删除和删除
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> @import url("css/table.css"); </style> <title>学生信息</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> </head> <body> <button>批量删除</button> <label><input type="checkbox" /></label> 学号 姓名 专业 操作 <label><input type="checkbox" /></label> 9527 唐伯虎 国画 <button class="view">查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 007 武松 体育 <button class="view">查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 1024 诸葛亮 心理学 <button class="view">查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 1010 刘义 计算机 <button class="view">查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 6969 晨儿 桑蚕技术 <button>查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 666 章三 小龙虾烹饪 <button>查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 5520 里斯 天文 <button>查看</button><button>修改</button><button>删除</button> 尾页 下一页 上一页 首页 <script> 如何实现删除功能?


<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> @import url("css/table.css"); </style> <title>学生信息</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> </head> <body> <button>批量删除</button> <label><input type="checkbox" /></label> 学号 姓名 专业 操作 <label><input type="checkbox" /></label> 9527 唐伯虎 国画 <button class="view">查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 007 武松 体育 <button class="view">查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 1024 诸葛亮 心理学 <button class="view">查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 1010 刘义 计算机 <button class="view">查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 6969 晨儿 桑蚕技术 <button>查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 666 章三 小龙虾烹饪 <button>查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 5520 里斯 天文 <button>查看</button><button>修改</button><button>删除</button> 尾页 下一页 上一页 首页 <script> 如何实现删除功能?




