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

最新推荐文章于 2024-04-29 17:42:02 发布

小帅子Lv

最新推荐文章于 2024-04-29 17:42:02 发布

阅读量340

点赞数 2

文章标签： JavaScript表格全选

本文链接：https://blog.csdn.net/qq_43113232/article/details/82717019

版权

本文介绍了如何使用JavaScript实现表格的全选、反选功能，并展示了鼠标移到表格行上时变色的效果案例，帮助提升用户交互体验。

摘要由CSDN通过智能技术生成

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

!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>