<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>管理员列表</title>
<style>
*{
margin:0;
padding:0;
}
table{
500px;
margin:auto;
border-collapse: collapse;
}
th,td{
text-align: center;
border:1px solid #000;
}
h1{
text-align: center;
margin:100px 0 20px 0;
}
</style>
</head>
<body>
<h1>管理员列表</h1>
<table id="data">
<thead>
<tr>
<th>
<input name="choose" type="checkbox" class="checked" value="全选" onclick="selectAll(this)">
</th>
<th>管理员ID</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="choose" type="checkbox"></td>
<td>1</td>
<td>Tester</td>
<td>
<button>修改</button>
<button>删除</button>
</td>
</tr>
<tr>
<td><input name="choose" type="checkbox"></td>
<td>2</td>
<td>Manager</td>
<td>
<button>修改</button>
<button>删除</button>
</td>
</tr>
<tr>
<td><input name="choose" type="checkbox"></td>
<td>3</td>
<td>Analyst</td>
<td>
<button>修改</button>
<button>删除</button>
</td>
</tr>
<tr>
<td><input name="choose" type="checkbox"></td>
<td>4</td>
<td>Admin</td>
<td>
<button>修改</button>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
<script>
// 全选或者取消全选
function selectAll(chb) {
// 获得id为data的table下tbody下的tr下的第一个td中的input，保存在变量chbs中
var data=document.getElementById("data");
chbs=data.querySelectorAll("tbody>tr>td:first-child>input");
// 遍历chbs中的每一个chb
for(var i=0;i<chbs.length;i++){
// 设置当前chb的checked等于chb的checked
chbs[i].checked=chb.checked;
}
}
window.onload=function () {
// 获得id为data的table下tbody下的tr下的第一个td中的input，保存在变量chbs中
var data=document.getElementById("data");
chbs=data.querySelectorAll("tbody>tr>td:first-child>input");
// 遍历chbs中的每一个chb
for(var i=0;i<chbs.length;i++){
// 设置当前chb的onclick=selectOne;
chbs[i].onclick=selectOne;
}
}
function selectOne() {//选中或取消选中一个chb
// this-->当前选中的chb
// 获得data下thead下的第一个th下的input，保存在变量selAll中
var selAll=data.querySelector("thead>tr>th:first-child>input");
// 如果当前chb的checked是false
if(this.checked==false){
// 将selAll的checked改为false
selAll.checked=false;
}else {//否则
// 获得id为data下的tbody下tr下的第一个td中的input，保存在变量chbs中
var chbs=data.querySelectorAll("tbody>tr>td:first-child>input");
for(var i=0;i<chbs.length;i++){//遍历chbs下每个chb
// 如果当前chb没有被选中，则直接返回
if(chbs[i].checked==false){return}
}//遍历结束
// 将selAll的checked改为true
selAll.checked=true;
}
}
</script>
</body>
</html>