javaweb/javascript/select_forms/select_forms.html at master · CPU-Code/javaweb · GitHub

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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!--
 * @由于个人水平有限, 难免有些错误, 还请指点:
 * @Author: cpu_code
 * @Date: 2020-10-20 23:19:46
 * @LastEditTime: 2020-10-21 16:39:53
 * @FilePath: \web\javascript\select_forms\select_forms.html
 * @Gitee: [https://gitee.com/cpu_code](https://gitee.com/cpu_code)
 * @Github: [https://github.com/CPU-Code](https://github.com/CPU-Code)
 * @CSDN: [https://blog.csdn.net/qq_44226094](https://blog.csdn.net/qq_44226094)
 * @Gitbook: [https://923992029.gitbook.io/cpucode/](https://923992029.gitbook.io/cpucode/)
-->
<!DOCTYPE html>
<html lang="ch">
    <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%;
            }

            .out{
                background-color: white;
            }

            .over{
                background-color: pink;
            }
        </style>

        <script>
            /*
            分析：
                1.全选：
                    * 获取所有的checkbox
                    * 遍历cb，设置每一个cb的状态为选中  checked
            */

            //1.在页面加载完后绑定事件
            window.onload = function(){
                //2.给全选按钮绑定单击事件
                document.getElementById("selectAll").onclick = function(){
                    //全选
                    //1.获取所有的checkbox
                    var cbs = document.getElementsByName("cb");
                    //2.遍历
                    for(var i = 0; i < cbs.length; i++){
                        //3.设置每一个cb的状态为选中  checked
                        cbs[i].checked = true;
                    }
                }

                document.getElementById("unSelectAll").onclick = function(){
                    //全不选
                    //1.获取所有的checkbox
                    var cbs = document.getElementsByName("cb");
                    //2.遍历
                    for(var i = 0; i < cbs.length; i++){
                        //3.设置每一个cb的状态为未选中  checked
                        cbs[i].checked = false;
                    }
                }

                document.getElementById("selectRev").onclick = function(){
                    //反选
                    //1.获取所有的checkbox
                    var cbs = document.getElementsByName("cb");
                    //2.遍历
                    for(var i = 0; i < cbs.length; i++){
                        //3.设置每一个cb的状态为相反
                        cbs[i].checked = !cbs[i].checked;
                    }
                }

                document.getElementById("firstCb").onclick = function(){
                    //第一个cb点击
                    //1.获取所有的checkbox
                    var cbs = document.getElementsByName("cb");
                    //获取第一个cb
                    //2.遍历
                    for(var i = 0; i < cbs.length; i++){
                        //3.设置每一个cb的状态和第一个cb的状态一样
                        cbs[i].checked = this.checked;
                    }
                }

                //给所有tr绑定鼠标移到元素之上和移出元素事件
                var trs = document.getElementsByTagName("tr");

                //2.遍历
                for(var i = 0; i < trs.length; i++){

                    //移到元素之上
                    trs[i].onmouseover = function(){
                        this.className = "over";
                    }

                    //移出元素
                    trs[i].onmouseout = function(){
                        this.className = "out";
                    }
                }
            }
        </script>
    </head>

    <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>cpucode</td>
                <td>男</td>
                <td><a href="javascript:void(0);">删除</a></td>
            </tr>

            <tr>
                <td><input type="checkbox" name="cb"></td>
                <td>2</td>
                <td>cpu</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>
    </body>

</html>