（前端开发）表格中的行全选、全不选、反选以及数据行背景色变换的示例代码
生活随笔
收集整理的這篇文章主要介紹了
（前端开发）表格中的行全选、全不选、反选以及数据行背景色变换的示例代码
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格數(shù)據(jù)行全選/全不選/反選的示例</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 () {/*** 全選按鈕* 給全選按鈕注冊點(diǎn)擊事件監(jiān)聽器*/document.getElementById("selectAll").onclick = function () {// 獲取所有的checkboxvar cbs = document.getElementsByName("cb");for (let i = 0; i < cbs.length; i++) {cbs[i].checked = true;}};/*** 控制第一個(gè)checkbox的狀態(tài)* 規(guī)則：* 除了第一個(gè)checkbox的其它c(diǎn)heckbox如果都是true，那么第一個(gè)checkbox則是true，否則是false*/function setFirstCbStatus() {// 獲取第一個(gè)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;}// 判斷是不是最后一次循環(huán)if (i == cbs.length - 1) {firstCb.checked = true;}}}/**** 反選功能的實(shí)現(xiàn)* 除了firstCb，其它c(diǎn)heckbox反選*/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;}}// 設(shè)置firstCb的狀態(tài)setFirstCbStatus();};/*** firstCb的點(diǎn)擊功能* 點(diǎn)擊firstCb時(shí)，如果firstCb選中，其它c(diǎn)heckbox也選中，否則其它c(diǎn)heckbox不選中*/document.getElementById("firstCb").onclick = function () {var cbs = document.getElementsByName("cb");for (let i = 0; i < cbs.length; i++) {// 所有的checkbox的狀態(tài)與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;}}/*** 全不選功能* 給全不選按鈕注冊點(diǎn)擊事件監(jiān)聽器*/document.getElementById("unSelectAll").onclick = function () {// 獲取所有的checkboxvar cbs = document.getElementsByName("cb");for (let i = 0; i < cbs.length; i++) {cbs[i].checked = false;}};/*** 給所有的tr注冊鼠標(biāo)指針移入事件監(jiān)聽器和鼠標(biāo)指針移出事件監(jiān)聽器*/var trs = document.getElementsByTagName("tr");for (let i = 0; i < trs.length; i++) {// 注冊鼠標(biāo)移入事件監(jiān)聽器trs[i].onmouseover = function () {// 將事件源即tr對象的class屬性值設(shè)為"over"this.className = "over";};// 注冊鼠標(biāo)移出事件監(jiān)聽器trs[i].onmouseout = function () {// 將事件源即tr對象的class屬性值設(shè)為"out"this.className = "out";};}};</script>
</head>
<body>
<table><caption>學(xué)生信息表</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>
總結(jié)
以上是生活随笔為你收集整理的（前端开发）表格中的行全选、全不选、反选以及数据行背景色变换的示例代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 土壤悬液进行梯度稀释的目的是什么 什么是
- 下一篇： 大可爱是什么意思 大可爱如何解释