具体实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border: 1px solid rgb(79, 202, 68);
width: 500px;
margin-left: 30%;
}
td,tr{
text-align: center;
border:1px solid;
}
div{
margin-top: 10px;
margin-left: 30%;
}
.out{
background-color: white;
}
.over{
background-color: lightpink;
}
</style>
<script>
/*
分析:
1.全选:
获取所有的checkbox
遍历checkbox,设置每一个cb的状态为选中 checked
*/
//1.在页面加载完后绑定事件
window.onload=function(){
//给全选按钮绑定单击事件
document.getElementById("selectall").onclick=function(){
//全选
//1.获取所有的checkbox
var cbs=document.getElementsByName("cb");
//2.遍历
for(var i=0;i<cbs.length;i++){
//3.设置每一个cb的状态为选中 checked
cbs[i].checked=true;
}
}
document.getElementById("unselectall").onclick=function(){
//反选
//1.获取所有的checkbox
var cbs=document.getElementsByName("cb");
//2.遍历
for(var i=0;i<cbs.length;i++){
//3.设置每一个cb的状态为相反
cbs[i].checked=false;
}
}
document.getElementById("selectrev").onclick=function(){
//全不选
//1.获取所有的checkbox
var cbs=document.getElementsByName("cb");
//2.遍历
for(var i=0;i<cbs.length;i++){
//3.设置每一个cb的状态为未选中 checked
cbs[i].checked=!cbs[i].checked;
}
}
document.getElementById("firstcb").onclick=function(){
//第一个cb点击
//1.获取所有的checkbox
var cbs=document.getElementsByName("cb");
//2.遍历
for(var i=0;i<cbs.length;i++){
//3.设置每一个cb的状态和第一个cb状态一样
cbs[i].checked=this.checked;
}
}
//给所有tr绑定鼠标移动到元素之上和移出元素之上事件
var trs=document.getElementsByTagName("tr");
//2.遍历
for(var i=0;i<trs.length;i++){
//绑定鼠标移动到元素之上
trs[i].onmouseover=function(){
this.className="over";
}
//移出元素
trs[i].onmouseout=function(){
this.className="out";
}
}
}
</script>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<td><input type="checkbox" name="cb" id="firstcb"></td>
<td><b>编号</b></td>
<td><b>姓名</b></td>
<td><b>性别</b></td>
<td><b>操作</b></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>1</td>
<td>Roxanne</td>
<td>女</td>
<td><a href="javascript:void(0);"οnclick="deltr(this)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"name="cb"></td>
<td>2</td>
<td>Charles</td>
<td>女</td>
<td><a href="javascript:void(0); " onclick="deltr(this)">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"name="cb"></td>
<td>3</td>
<td>Xanax</td>
<td>男</td>
<td><a href="javascript:void(0);"οnclick="deltr(this)">删除</a></td>
</tr>
</table>
<div>
<input type="button" id="selectall" value="全选">
<input type="button" id="unselectall" value="全不选">
<input type="button" id="selectrev" value="反选">
</div>
</body>
</html>