JavaScript全选表格，事件应用，及this关键次的运用

最新推荐文章于 2023-02-24 15:21:47 发布

SALA110

最新推荐文章于 2023-02-24 15:21:47 发布

阅读量290

点赞数 1

CC 4.0 BY-SA版权

文章标签： Javaweb javaScript

本文链接：https://blog.youkuaiyun.com/SALA110/article/details/82717103

本文详细介绍了如何使用HTML和JavaScript实现表格中复选框的全选、全不选及反选功能，同时展示了如何通过事件监听使表格单元格在鼠标悬停时改变背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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%;
        }
    </style>


</head>
<body>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" class="check_cls"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

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

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

    <tr>
        <td><input type="checkbox" class="check_cls"></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>
    /*/!* 需求：当点击全选按钮的时候，所有的按钮将全部选中
      分析：实现表格全选
          1.当点击全选按钮的时候，所有的checkbox按钮的状态全部为选中
     *!/
    //获取全选按钮的对象
    var checkall = document.getElementById("selectAll");
    //绑定单击事件
    checkall.onclick = function () {
        //获取所有的checkbox对象
        var check_clss = document.getElementsByClassName("check_cls");
        //对获取的 check_clss 数组进行遍历
        for (var i = 0; i < check_clss.length; i++) {
            //获取每个选择按钮的状态
            check_clss[i].checked = true;//通过查阅API可知：选择按钮有个属性checked，可以返回一个boolean值，选中的时候返回true，反之返回false
            //让所有的状态变为true，
        }
    }

    /!*
       需求：当点击全不选按钮的时候，所有的按钮将全部取消选中
            分析：给全不选择按钮 绑定 单击事件， 当点击的时候， 所有的按钮状态全部改为False即可
     *!/
    //获取 全不选按钮 对象
    var checkNot = document.getElementById('unSelectAll');
    checkNot.onclick = function () {
        //获取所有的checkbox按钮
        var check_clss = document.getElementsByClassName("check_cls");
        //遍历获取的 对象 数组
        for(var j = 0;j<check_clss.length;j++){
            check_clss[j].checked = false ;
        }
    }

     /!*
        需求：点击反选按钮的时候 ，所有的按钮状态 将变为相反的 状态
      *!/
     //获取 反选 按钮的对象
    var checkfan = document.getElementById('selectRev');
    //绑定单击事件
    checkfan.onclick = function () {
        //获取所有的按钮对象
        var check_clss = document.getElementsByClassName('check_cls');
        //遍历所有的数组
        for(var x = 0;x < check_clss.length ;x++){
            check_clss[x].checked = !check_clss[x].checked;
        }
    }
*/

    /*
       需求：鼠标放在哪里，哪里就变颜色，移开后，颜色还原
          分析：需要给元素绑定 鼠标在元素上的 onmouseover  还需要给元素绑定 鼠标移开元素上的事件 onmouseout
     */
    //获取所有的td元素对象
    var tds = document.getElementsByTagName("td");
    //循环遍历每个td对象
    for(var y = 0;y<tds.length ;y++){
        //将每个td对象绑定事件
        tds[y].onmouseover = function () {
            //当对象为数组的时候，必须用this 关键字确定鼠标移动所在的元素，因为数组遍历是按索引顺序来访问的，而我们在移动鼠标是不可能按照这个顺序，导致系统无法识别
            this.style.backgroundColor = "pink";
        }
        tds[y].onmouseout = function () {
            this.style.backgroundColor = "white"
        }
    }




</script>
</body>
</html>