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

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> （前端开发）表格中的行全选、全不选、反选以及数据行背景色变换的示例代码 -> 正文阅读

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

<!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 () {
                // 获取所有的checkbox
                var 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() {
                // 获取第一个checkbox
                var firstCb = document.getElementById("firstCb");
                // 获取全部的checkbox
                var 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 () {
                // 获取所有的checkbox
                var 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>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-12-04 13:21:37 更:2021-12-04 13:22:33

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 7:44:33-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码