javaScript表格全选，不选，反选，鼠标移动变色案例

柔情只为你懂 2022-05-12 07:24 169阅读 0赞

# 表格全选，鼠标移动变色案例 #

!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格全选</title>
        <style>
            table{
                border: 1px solid;
                width: 500px;
                margin-left: 30%;
            }
    
            td,th{
                text-align: center;
                border: 1px solid;
            }
            div{
                margin-top: 10px;
                margin-left: 30%;
            }
            .over{
                background-color: purple;
            }
            .out{
                background-color: pink;
            }
        </style>
    
    </head>
    <body>
    
    <table>
        <caption>学生信息表</caption>
        <tr>
            <th><input type="checkbox" name="cb" id="fristcb"></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>
    
    </table>
    <div>
        <input type="button" id="selectAll" value="全选">
        <input type="button" id="unSelectAll" value="全不选">
        <input type="button" id="selectRev" value="反选">
    </div>
    <script>
        window.onload = function() {
            //创建全选事件
            document.getElementById("selectAll").onclick = function () {
                //找出所有的checkbox
                var cbArray = document.getElementsByName("cb");
                //遍历
                for (var i = 0; i < cbArray.length; i++) {
                    //3.设置每一个cbArray的状态为选中  checked
                    cbArray[i].checked = true;
                }
            }
    
    
    
            document.getElementById("unSelectAll").onclick = function () {
                //全不选
                //找出所有的checkbox
                var cbArray = document.getElementsByName("cb");
                //遍历
                for (var i = 0; i < cbArray.length; i++) {
                    //设置每一个cb的状态为未选中 checked
                    cbArray[i].checked = false;
                }
            }
    
    
    
    
            document.getElementById("selectRev").onclick = function () {
                //反选
                //找出所有的checkbox
                var cbArray = document.getElementsByName("cb");
                //遍历
                for (var i = 0; i < cbArray.length; i++) {
                    //设置每一个cb的状态为相反
                    cbArray[i].checked = !cbArray[i].checked;
                }
            }
    
    
    
           document.getElementById("fristcb").onclick = function () {
               //第一个cb点击
                //找出所有的checkbox
                    var cbArray = document.getElementsByName("cb");
                    //遍历
                    for (var i = 0; i < cbArray.length; i++) {
                        //设置每一个cb的状态和第一个cb状态一样
                        cbArray[i].checked =this.checked;
                 }
            }
    
    
    
            //给所有tr绑定鼠标移到元素之上和移出元素事件
            var trs = document.getElementsByTagName("tr");
            //遍历tr
            for(var i=0;i<trs.length;i++){
                //移到元素之上
                trs[i].onmouseover=function () {
                    this.className="over";
                }
                //移除元素
                trs[i].onmouseout=function () {
                 this.className="out";
                }
            }
        }
        </script>
    </body>
    </html>