html表格用 javaScript优化实现多选,反选,悬浮变色的功能

最新推荐文章于 2023-07-06 10:59:21 发布

码破丶苍穹

最新推荐文章于 2023-07-06 10:59:21 发布

阅读量278

点赞数

分类专栏： JavaScript 文章标签： javaScript html 多选反选悬浮变色

本文链接：https://blog.csdn.net/qq_45066990/article/details/103316519

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html表格用 javaScript优化实现多选,反选,悬浮变色的功能

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table {
            /*给表格加边框  宽度1像素 实线*/
            border: 1px solid;
            /*定义宽度为500像素*/
            width: 500px;
            /*距离左边*/
            margin-left: 30%;
        }

        td, th {
            /*文字居中*/
            text-align: center;
            /*给表格加边框  宽度1像素 实线*/
            border: 1px solid;
        }

        div {
            /*距离顶部10像素*/
            margin-top: 10px;
            /*距离左边30%*/
            margin-left: 30%;
        }

        /*定义鼠标离开后的背景色*/
        .out {
            background: white;
        }

        /*定义鼠标悬浮的背景色*/
        .over {
            background: pink;
        }
    </style>


</head>
<body>
<script>
    window.onload = function () {
        //获取每一行的元素
        var trd = document.getElementsByTagName("tr");
        for (var i = 0; i < trd.length; i++) {
            //获取鼠标悬浮事件
            trd[i].onmouseover = function () {
                //更改背景色
                this.className = "over";
            }
            //获取鼠标离开事件
            trd[i].onmouseout = function () {
                //更改背景色
                this.className = "out";
            }
        }
        // 定义全选按钮     onclck--单击事件
        document.getElementById("selectAll").onclick = function () {
            // 通过名字获取checkbox数组
            var cs = document.getElementsByName("cd");
            //遍历数组让每个checkbox都被赋值true ps;checkbox被点击后属性true显示对号,false为不选
            for (var i = 0; i < cs.length; i++) {
                cs[i].checked = true;
            }


        }
        // 定义全不选按钮     onclck--单击事件
        document.getElementById("unSelectAll").onclick = function () {
            // 通过名字获取checkbox数组
            var cs = document.getElementsByName("cd");
            //遍历数组让每个checkbox都被赋值false  ps;checkbox被点击后属性true显示对号,false为不选
            for (var i = 0; i < cs.length; i++) {

                cs[i].checked = false;
            }
        }

        // 定义反选按钮     onclck--单击事件
        document.getElementById("selectRev").onclick = function () {
            // 通过名字获取checkbox数组
            var cs = document.getElementsByName("cd");
            //遍历数组让每个checkbox的值都和之前相反   即为反选
            for (var i = 0; i < cs.length; i++) {

                cs[i].checked = !cs[i].checked;
            }
            //处理bug
            //反选后 表格没有全选但是表头的checkbox被赋值
            //判断反选后3个checkbox 的值是不是都为true  
            //是的话将表头checkbox赋值true
            if (!(cs[1].checked && cs[2].checked && cs[3].checked)) {
                cs[0].checked = false;
            }

        }
        //点击表头checkbox达到全选或者全不选的目的
        document.getElementById("cd1").onclick = function () {
            // 通过名字获取checkbox数组
            var cs = document.getElementsByName("cd");
            //遍历数组让每个checkbox的值都表头checkbox的值相同
            for (var i = 0; i < cs.length; i++) {
                cs[i].checked = this.checked;
            }
        }
        //当第二个checkbox被点击判断是不是除了表头checkbox都被点击
        //如果都被点击则将表头checkbox值修改为 true;
        document.getElementById("cd2").onclick = function () {
            var cs = document.getElementsByName("cd");
            if ((cs[1].checked && cs[2].checked && cs[3].checked)) {
                cs[0].checked = true;
            }
        }
        //当第三个checkbox被点击判断是不是除了表头checkbox都被点击
        //如果都被点击则将表头checkbox值修改为 true;
        document.getElementById("cd3").onclick = function () {
            var cs = document.getElementsByName("cd");
            if ((cs[1].checked && cs[2].checked && cs[3].checked)) {
                cs[0].checked = true;
            }
        }
        //当第四个checkbox被点击判断是不是除了表头checkbox都被点击
        //如果都被点击则将表头checkbox值修改为 true;
        document.getElementById("cd4").onclick = function () {
            var cs = document.getElementsByName("cd");
            if ((cs[1].checked && cs[2].checked && cs[3].checked)) {
                cs[0].checked = true;
            }
        }
    }
</script>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cd" id="cd1"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox" name="cd" id="cd2"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cd" id="cd3"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cd" id="cd4"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
<div>
    <!--定义3个按钮-->
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>

</body>
</html>

码破丶苍穹

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
html表格用 javaScript优化实现多选,反选,悬浮变色的功能

html表格用 javaScript优化实现多选,反选,悬浮变色的功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格全选</title> <style> table { ...
复制链接

扫一扫