Web实现表格单选全选与反选操作：JavaScript DOM基础与实例教程

前端
字数统计: 1.6k   |   阅读时长≈ 7 分钟

Web实现表格单选全选与反选操作：JavaScript DOM基础与实例教程

在Web开发中，处理表格数据时，全选与反选功能是常见的交互需求。本文将通过一个简单的实例，介绍如何使用JavaScript DOM API来实现表格中的全选与反选操作，并讲解相关的JavaScript DOM基础知识。

实现效果

JavaScript DOM基础

DOM（Document Object Model）是文档对象模型的缩写，它将HTML或XML文档视为树结构，每个节点都是文档的一部分，可以是文档本身、元素、属性或文本内容。JavaScript中的DOM API提供了大量的方法和属性，允许开发者动态地访问和更新文档的内容、结构和样式。

实例：表格全选与反选操作

创建HTML表格结构

首先，我们需要创建一个包含商品信息的表格，并在表头添加一个全选复选框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="wrap">
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="j_cbAll" /></th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <!-- 商品列表 -->
        </tbody>
    </table>
</div>

使用JavaScript实现全选与反选

单选操作

1
2
3
4
5
6
7
8
9
10
11
// 获取元素
var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
 var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
        // 注册事件
        j_cbAll.onclick = function() {
                // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
		}

全选操作

全选操作的目标是当用户点击全选复选框时，所有商品的复选框都应该被选中。

1
2
3
4
5
6
7
8
9
10
11
12
// 获取全选复选框元素
var j_cbAll = document.getElementById('j_cbAll');
// 获取所有商品复选框元素
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');

// 为全选复选框绑定点击事件
j_cbAll.onclick = function() {
    // 遍历所有商品复选框，设置与全选复选框相同的选中状态
    for (var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].checked = this.checked;
    }
};

反选操作

反选操作的目标是当任何一个商品复选框的状态发生变化时，检查所有复选框的状态，并据此更新全选复选框的选中状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 为每个商品复选框绑定点击事件
for (var i = 0; i < j_tbs.length; i++) {
    j_tbs[i].onclick = function() {
        // 定义一个变量flag来标记是否所有复选框都被选中
        var flag = true;
        // 遍历所有商品复选框，如果发现有未选中的，设置flag为false
        for (var i = 0; i < j_tbs.length; i++) {
            if (!j_tbs[i].checked) {
                flag = false;
                break; // 只要发现一个未选中的，就可以终止循环
            }
        }
        // 根据flag的值更新全选复选框的选中状态
        j_cbAll.checked = flag;
    }
}

全部代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>单选全选反选</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        // 1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
        // 注册事件
        j_cbAll.onclick = function() {
                // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
                console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                }
            }
            // 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>

</html>

结语

通过上述代码，我们实现了表格中的全选与反选功能。这个实例展示了如何使用JavaScript DOM API来操作HTML元素，并响应用户事件。全选与反选功能是表格交互中的基础，掌握这种操作对于开发复杂的数据表格应用至关重要。希望本文能帮助你更好地理解DOM操作，并将其应用到你的Web项目中。

如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀

打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2022-2024 何福海
  • 访问人数: | 浏览次数:

请我喝杯奶茶吧~

支付宝
微信