<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表格全选</title><style>div{text-align: center;margin: 50px;/*外边距值50px*/}table{border: 1px solid;margin: auto;width: 500px;}td,th{text-align: center;border: 1px solid;}.out{background-color: white;}.over{background-color: gold;}</style><script>/*分析：1、全选获取所有的checkbox遍历cb，设置每一个cb的状态为选中 checked*///1、在页面加载完成之后绑定事件window.onload = function () {//2、给全选按钮绑定单击事件document.getElementById("selectAll").onclick = function () {//全选//1、获取所有的checkboxvar cbs = document.getElementsByName("cb");//2、遍历for (var i = 0;i<cbs.length;i++) {//3、设置每一个cb的状态为checkedcbs[i].checked = true;}}document.getElementById("unselectAll").onclick = function () {//全不选//1、获取所有的checkboxvar 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、获取所有的checkboxvar cbs = document.getElementsByName("cb");//2、遍历for (var i = 0;i<cbs.length;i++) {//3、设置每一个cb的状态为相反状态if(cbs[i].checked == true)cbs[i].checked = false;elsecbs[i].checked = true;}}document.getElementById("firstcb").onclick = function () {//全不选//1、获取所有的checkboxvar cbs = document.getElementsByName("cb");//获取第一个cb//2、遍历for (var i = 0;i<cbs.length;i++) {//3、设置每一个cb的状态不选//cbs[i].checked = cbs[0].checked;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" id="firstcb" name="cb"></td><td>编号</td><td>姓名</td><td>性别</td><td>操作</td></tr><tr><td><input type="checkbox" name="cb"></td><td>1</td><td>无心</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>2</td><td>萧瑟</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>雷无桀</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>4</td><td>唐莲</td><td>男</td><td><a href="javascript:void(0);" onclick="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>
