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

DOCTYPE html>


    
    表格数据行全选/全不选/反选的示例
    
        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;
        }
    
    
        window.onload = function () {
            /**
             * 全选按钮
             * 给全选按钮注册点击事件监听器
             */
            document.getElementById("selectAll").onclick = function () {
                // 获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                for (let i = 0; i 
        1
        令狐冲
        男
        删除
    
    
        
        2
        任我行
        男
        删除
    
    
        
        3
        岳不群
        男
        删除
    
    
        
        4
        周芷若
        女
        删除