利用JS来实现表格的全选、全不选、反选以及删除的功能

最新推荐文章于 2026-04-05 03:02:05 发布

原创最新推荐文章于 2026-04-05 03:02:05 发布 · 2.6k 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

js事件的运用专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现表格的全选、全不选、反选和删除功能，通过事件绑定和循环技术来控制表格单元格的选择状态，并展示了鼠标悬停时颜色变化的代码示例。

利用JS来进行表格的选择删除等功能

二、代码
总结

二、代码

1.表格的制作以及事件的绑定

代码如下（示例）：

<body>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstcb"></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);" onclick="miss(this)">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="miss(this)">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="miss(this)">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</body>

2.全选按钮的功能实现

代码如下（示例）：

<script>

    window.onload  = function(){
        document.getElementById("selectAll").onclick = function(){
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++) {
                cbs[i].checked = true;
            }

        }
</script>

3.全不选按钮的功能实现

代码如下（示例）：

<script>

    document.getElementById("unSelectAll").onclick = function(){
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++) {
                cbs[i].checked = false;
            }

        }
</script>

4.反选按钮的功能实现

代码如下（示例）：

<script>

    document.getElementById("selectRev").onclick = function(){
            var cbs = document.getElementsByName("cb");
            for (var i = 1; i < cbs.length; i++) {
                cbs[i].checked = !cbs[i].checked
            }

        }
</script>

5.删除按钮的功能实现

代码如下（示例）：

<script>

    function miss(n) {
        n.parentNode.parentNode.remove();
    }

</script>

6.鼠标悬停时颜色的变化

代码如下（示例）：

   <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: pink;
        }
        .out{
            background-color: white;
        }*/
        tr:hover{
            background-color: pink;
        }
        a:link{
            color: red;
        }
        a:visited{
            color: blue;
        }
        a:hover{
            color: green;
        }
        a:active{
            color: yellow;
        }
    </style>
    .....
<script>

    document.getElementById("firstcb").onclick = function(){
            var cbs = document.getElementsByName("cb");
            var firstcb = document.getElementById("firstcb");
            for (var i = 0; i < cbs.length; i++) {
                cbs[i].checked = firstcb.checked;
            }

        }
</script>