全选反选与取消操作"/>
【HTML】实现表格全选反选与取消操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选反选删除操作</title>
<style>
/* 表格边框样式 */
table {
border: 1px solid black;
width: 400px;
border-collapse: collapse;
text-align: center;
}
table td
{
width: 50px;
height: 50px;
border: 1px solid black;
}
table div{
border: 5px solid black;
}
#box1{
margin: 0 auto;
}
#box2{
width: 400px;
height: 40px;
margin: 0 auto;
}
.box3{
height: 40px;
width: 40px;
border: 1px solid black;
}
</style>
</head>
<body>
<table id="box1">
<div id="box">
<tr>
<div>
<td class="box4"><input type="checkbox" name="email"style="height: 20px;" style="width: 20px;"></td>
</div>
<td >111</td>
<td >111</td>
</tr>
<tr>
<td class="box4"><input type="checkbox" name="email" style="height: 20px;" style="width: 20px;"></td>
<td class="box3">222</td>
<td class="box3">222</td>
</tr>
<tr>
<td class="box4"><input type="checkbox" name="email" style="height: 20px;" style="width: 20px;"></td>
<td class="box3">333</td>
<td class="box3">333</td>
</tr>
</div>
<div id="box2">
<button type="button" οnclick="selBtn(1)" style="height: 30px;" style="width: 100px;">全选</button>
<button type="button" οnclick="selBtn(0)" style="height: 30px;" style="width: 100px;">取消全选</button>
<button type="button" οnclick="selBtn(2)" style="height: 30px;" style="width: 100px;">反选</button>
</div>
</table>
<script>
/* 全选框全选和取消全选 */
function selectAll(sel){
//让所有的选择框与当前选择框选择状态样即可
let emails = document.getElementsByName("email");
for (let email of emails) {
email.checked = sel.checked;
}
let sels = document.getElementsByName("selAll");
for (let selAll of sels) {
selAll.checked = sel.checked;
}
}
/* 全选反选取消全选按钮 */
function selBtn(flag){
if(flag>1){
//大于0反选，等于自己本身选择状态取反
let emails = document.getElementsByName("email");
for (let email of emails) {
email.checked = !email.checked;
}
}else{
//为0和1时直接赋给状态，js中0为false，除0外都为true
let emails = document.getElementsByName("email");
for (let email of emails) {
email.checked = flag;
}
let sels = document.getElementsByName("selAll");
for (let selAll of sels) {
selAll.checked = flag;
}
}
}
//删除所选
function delSel(){
//遍历删除选中即可，找到tr的父节点删除tr
let emails = document.getElementsByName("email");
for (let i=0;i<emails.length;i++) {
if(emails[i].checked){
emails[i].parentNode.parentNode.parentNode.removeChild(emails[i].parentNode.parentNode);
i--;
}
}
}
</script>
</body>
</html>
更多推荐
【HTML】实现表格全选反选与取消操作
发布评论