代码做一个javaweb1实现反选效果 2 点击删除如果本行复选框没选中提示消息不能删除;否则确认框提示是否删除选择是删除该行 3 批量删除:判断有没有选中没有提示信息否则删除选中行
时间: 2024-02-24 19:54:14 浏览: 73
好的,下面是一个示例代码,实现了您的需求:
HTML代码:
```
<table id="myTable">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
<th><input type="checkbox" id="selectAll">全选</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>张三</td>
<td>20</td>
<td><button class="deleteBtn">删除</button></td>
<td><input type="checkbox" class="selectOne"></td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>25</td>
<td><button class="deleteBtn">删除</button></td>
<td><input type="checkbox" class="selectOne"></td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>30</td>
<td><button class="deleteBtn">删除</button></td>
<td><input type="checkbox" class="selectOne"></td>
</tr>
</tbody>
</table>
<button id="deleteSelected">批量删除</button>
<button id="reverseSelect">反选</button>
```
JavaScript代码:
```
// 反选
$('#reverseSelect').click(function() {
$('.selectOne').each(function() {
$(this).prop('checked', !$(this).prop('checked'));
});
});
// 单行删除
$('.deleteBtn').click(function() {
var checkbox = $(this).parents('tr').find('.selectOne');
if (!checkbox.prop('checked')) {
alert("请选中要删除的行");
} else {
if (confirm("是否删除该行?")) {
$(this).parents('tr').remove();
}
}
});
// 全选
$('#selectAll').click(function() {
$('.selectOne').prop('checked', $(this).prop('checked'));
});
// 批量删除
$('#deleteSelected').click(function() {
var flag = false;
$('.selectOne').each(function() {
if ($(this).prop('checked')) {
flag = true;
$(this).parents('tr').remove();
}
});
if (!flag) {
alert("请选中要删除的行");
}
});
```
解释一下代码:
1. 反选:给“反选”按钮绑定一个点击事件,遍历所有复选框,使用prop()方法修改其checked属性值,实现反选效果。
2. 单行删除:给“删除”按钮绑定一个点击事件,获取该行对应的复选框,如果未选中,则弹出提示框;否则弹出确认框,用户点击确认后,使用remove()方法将该行从表格中删除。
3. 全选:给全选复选框绑定一个点击事件,遍历所有复选框,使用prop()方法修改其checked属性值,实现全选效果。
4. 批量删除:给“批量删除”按钮绑定一个点击事件,遍历所有复选框,如果选中,则使用remove()方法将该行从表格中删除。如果没有选中任何复选框,则弹出提示框。
希望这个示例能够帮助您实现您的需求。
阅读全文
相关推荐
如图示:
功能描述:在勾选了全选时,所有的商品都会勾选,在取消全选时,取消所有物品的勾选。如果点击批量删除,删除所勾选的商品。
<input type=checkbox id=allChecks onclick=ckAll() /> 全选/全不选
//全选
function ckAll(){
var flag=document.getElementById(allChecks).checked;
var cks=document.getElementsByName(check);