【HTML】实现表格全选反选与取消操作

最新推荐文章于 2023-02-02 23:38:47 发布

****819

最新推荐文章于 2023-02-02 23:38:47 发布

阅读量491

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/weixin_64557527/article/details/125545921

版权

<!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>