（前端开发）表格中的行全选、全不选、反选以及数据行背景色变换的示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格数据行全选/全不选/反选的示例</title><style>table {border: 1px solid;width: 500px;margin-left: 30%;}th, td {text-align: center;border: 1px solid;}div {/*border: 1px solid red;*/margin-top: 10px;margin-left: 30%;}.over {background-color: pink;}.out {background-color: white;}</style><script !src="">window.onload = function () {/*** 全选按钮* 给全选按钮注册点击事件监听器*/document.getElementById("selectAll").onclick = function () {// 获取所有的checkboxvar cbs = document.getElementsByName("cb");for (let i = 0; i < cbs.length; i++) {cbs[i].checked = true;}};/*** 控制第一个checkbox的状态* 规则：* 除了第一个checkbox的其它checkbox如果都是true，那么第一个checkbox则是true，否则是false*/function setFirstCbStatus() {// 获取第一个checkboxvar firstCb = document.getElementById("firstCb");// 获取全部的checkboxvar cbs = document.getElementsByName("cb");for (let i = 0; i < cbs.length; i++) {if (cbs[i].checked == false && cbs[i].id != "firstCb") {firstCb.checked = false;break;}// 判断是不是最后一次循环if (i == cbs.length - 1) {firstCb.checked = true;}}}/**** 反选功能的实现* 除了firstCb，其它checkbox反选*/document.getElementById("selectRev").onclick = function () {var cbs = document.getElementsByName("cb");for (let i = 0; i < cbs.length; i++) {// 判断是不是firstCb，不是才需要反选if (cbs[i].id != "firstCb") {cbs[i].checked = !cbs[i].checked;}}// 设置firstCb的状态setFirstCbStatus();};/*** firstCb的点击功能* 点击firstCb时，如果firstCb选中，其它checkbox也选中，否则其它checkbox不选中*/document.getElementById("firstCb").onclick = function () {var cbs = document.getElementsByName("cb");for (let i = 0; i < cbs.length; i++) {// 所有的checkbox的状态与firstCb的相同cbs[i].checked = this.checked;}};var cbs = document.getElementsByName("cb");for (let i = 0; i < cbs.length; i++) {if (cbs[i].id != "firstCb") {cbs[i].onclick = setFirstCbStatus;}}/*** 全不选功能* 给全不选按钮注册点击事件监听器*/document.getElementById("unSelectAll").onclick = function () {// 获取所有的checkboxvar cbs = document.getElementsByName("cb");for (let i = 0; i < cbs.length; i++) {cbs[i].checked = false;}};/*** 给所有的tr注册鼠标指针移入事件监听器和鼠标指针移出事件监听器*/var trs = document.getElementsByTagName("tr");for (let i = 0; i < trs.length; i++) {// 注册鼠标移入事件监听器trs[i].onmouseover = function () {// 将事件源即tr对象的class属性值设为"over"this.className = "over";};// 注册鼠标移出事件监听器trs[i].onmouseout = function () {// 将事件源即tr对象的class属性值设为"out"this.className = "out";};}};</script>
</head>
<body>
<table><caption>学生信息表</caption><tr><th><input id="firstCb" type="checkbox" name="cb"></th><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td><input type="checkbox" name="cb"></td><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0);">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>3</td><td>岳不群</td><td>男</td><td><a href="javascript:void(0);">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>4</td><td>周芷若</td><td>女</td><td><a href="javascript:void(0);">删除</a></td></tr>
</table>
<div><input id="selectAll" type="button" value="全选"><input id="unSelectAll" type="button" value="全不选"><input id="selectRev" type="button" value="反选">
</div>
</body>
</html>