实现思路：
1.通过表单，可以添加数据到表格中显示
2.id自动根据已有的最大id值进行累加，删除一条记录的时候，最大id值不会变化（id的值不是根据表格中编号的最大值去计算）
3.隔行变色，新增加的行应该也需要隔行变色的
4.鼠标移入高亮
5.全选/全不选（checkAll和下面的每一个checkbox是有关联的）
6.选中变色
7.上移/下移
8.删除
9.排序
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 form {
8 margin: 10px 0;
9 }
10 td {
11 text-align: center;
12 }
13
14 .c1 {
15 background: #CCCCCC;
16 }
17 .c2 {
18 background: white;
19 }
20 .c3 {
21 background: #ff9900;
22 }
23 .c4 {
24 background: #186318;
25 color: white;
26 }
27 </style>
28 <script>
29
30 var data = [
31 {
32 id: 1,
33 name : '欢欢',
34 sex : '女',
35 age : 22
36 },
37 {
38 id: 2,
39 name : '小明',
40 sex : '男',
41 age : 28
42 },
43 {
44 id: 3,
45 name : '芊芊',
46 sex : '女',
47 age : 18
48 }
49 ];
50
51 var maxId = 3;
52
53 window.onload = function() {
54 var tab = document.getElementById('tab1');
55 var tbody = tab.tBodies[0];
56
57 //获取表单元素
58 var form1 = document.getElementById('form1');
59 var form2 = document.getElementById('form2');
60
61 var checkAll = document.getElementById('checkAll');
62
63 //初始化数据的添加
64 //addData(data[0]);
65 for ( var i=0; i<data.length; i++ ) {
66 addData(data[i]);
67 }
68 //初始化隔行变色
69 changeColor();
70
71 //通过表单添加数据
72 form1.btn.onclick = function() {
73
74 if ( form1.username.value == '' || form1.age.value == '' || form1.sex.value == '' ) {
75 alert('请输入完整的数据');
76 } else {
77
78 //添加数据到表格中
79 maxId++;
80 addData({
81 id: maxId,
82 name : form1.username.value,
83 sex : form1.sex.value,
84 age : form1.age.value
85 });
86 //每次添加新数据的时候，重新调用隔行变色
87 changeColor();
88
89 //因为新增数据是一定未选中的，那么全选也应该是未选中的
90 checkAll.checked = false;
91
92 }
93
94 }
95
96 //点击checkAll，全选和全不选
97 checkAll.onclick = function() {
98 var checkBoxes = tbody.getElementsByTagName('input');
99 var trs = tbody.rows;
100
101 for ( var i=0; i<checkBoxes.length; i++ ) {
102
103 checkBoxes[i].checked = this.checked;
104
105 if (this.checked) {
106 //全选
107 trs[i].className = 'c4';
108 } else {
109 //全不选
110 trs[i].className = trs[i].oldColor;
111 }
112
113 }
114 }
115
116 //排序
117 form2.orderButton.onclick = function() {
118 if ( form2.orderName.value == '' || form2.orderBy.value == '' ) {
119 alert('请选择排序方式和排序字段')
120 } else {
121 order( form2.orderName.value, form2.orderBy.value );
122 }
123 }
124
125 /*
126 * 把单条数据添加到表格中
127 * @params object data 要添加到表格中的单条数据
128 * @return
129 * */
130 function addData(data) {
131
132 //每一条数据需要创建一个tr，6个td，每个td里面放置对应的内容
133
134 var tr = document.createElement('tr');
135
136 //checkbox
137 var td0 = document.createElement('td');
138
139 //因为checkbox需要绑定事件，我们这里使用createElement的方式来创建checkbox
140 var checkbox = document.createElement('input');
141 checkbox.type = 'checkbox';
142
143 //给checkbox添加onclick选择
144 checkbox.onclick = function() {
145 //根据当前的checkbox是否选中，去处理当前这一行的背景色
146 if (this.checked) {
147 //如果当前是选中的，把当前行class设置成c4
148 tr.className = 'c4';
149 } else {
150 //如果当前不是选中的
151 tr.className = 'c3';
152 }
153
154 //处理全选
155 var checkBoxes = tbody.getElementsByTagName('input');
156 //循环查看tbody里面的所有checkbox元素，只要有一个是没选中的，那么就非全选，否则就是全选
157 for ( var i=0; i<checkBoxes.length; i++ ) {
158 if ( !checkBoxes[i].checked ) {
159 checkAll.checked = false;
160 return;
161 }
162 }
163
164 //如果代码能走到这里来，就说明上面的循环过程中，所有的checkbox都是选中的
165 checkAll.checked = true;
166 }
167
168 td0.appendChild(checkbox);
169
170 tr.appendChild(td0);
171
172 //编号
173 var td1 = document.createElement('td');
174 td1.innerHTML = data.id;
175 tr.appendChild(td1);
176
177 //姓名
178 var td2 = document.createElement('td');
179 td2.innerHTML = data.name;
180 tr.appendChild(td2);
181
182 //性别
183 var td3 = document.createElement('td');
184 td3.innerHTML = data.sex;
185 tr.appendChild(td3);
186
187 //年龄
188 var td4 = document.createElement('td');
189 td4.innerHTML = data.age;
190 tr.appendChild(td4);
191
192 //操作
193 var td5 = document.createElement('td');
194
195 var btn0 = document.createElement('button');
196 btn0.innerHTML = '上移';
197 //上移
198 btn0.onclick = function() {
199 //把当前行的tr添加到tr的上一个兄弟节点的前面
200 if ( tr.previousElementSibling ) {
201 tbody.insertBefore( tr, tr.previousElementSibling );
202 changeColor();
203 }
204 }
205 td5.appendChild(btn0);
206
207 var btn1 = document.createElement('button');
208 btn1.innerHTML = '下移';
209 //下移
210 btn1.onclick = function() {
211 //把当前行的tr添加到tr的下一个兄弟节点的后面
212 if ( tr.nextElementSibling ) {
213 tbody.insertBefore( tr.nextElementSibling, tr );
214 changeColor();
215 }
216 }
217 td5.appendChild(btn1);
218
219 var btn2 = document.createElement('button');
220 btn2.innerHTML = '删除';
221 //删除
222 btn2.onclick = function() {
223 tbody.removeChild(tr);
224 changeColor();
225
226 //处理全选
227 var checkBoxes = tbody.getElementsByTagName('input');
228 if (checkBoxes.length) {
229 //循环查看tbody里面的所有checkbox元素，只要有一个是没选中的，那么就非全选，否则就是全选
230 for ( var i=0; i<checkBoxes.length; i++ ) {
231 if ( !checkBoxes[i].checked ) {
232 checkAll.checked = false;
233 return;
234 }
235 }
236
237 //如果代码能走到这里来，就说明上面的循环过程中，所有的checkbox都是选中的
238 checkAll.checked = true;
239 }
240
241 }
242 td5.appendChild(btn2);
243
244 tr.appendChild(td5);
245
246 //给每一行添加鼠标移入移出的事件处理函数
247 //鼠标移入
248 tr.onmouseover = function() {
249 //鼠标移入的时候也需要根据当前tr里面的checkbox的状态去设置tr的class
250 if (checkbox.checked) {
251 this.className = 'c4';
252 } else {
253 this.className = 'c3';
254 }
255 }
256 //鼠标移出
257 tr.onmouseout = function() {
258 //当鼠标离开tr的时候，需要根据当前tr里面的checkbox的状态去设置当前tr的class
259 if (checkbox.checked) {
260 //如果当前tr里面的checkbox是选中的，那么离开tr以后，这个tr的class应该还是c4
261 this.className = 'c4';
262 } else {
263 //如果当前tr里面的checkbox不是选中的，那么离开这个tr以后，应该回到当前tr最开始class
264 this.className = this.oldColor;
265 }
266 }
267
268 tbody.appendChild(tr);
269 }
270
271 /*
272 * 隔行变色
273 * @return
274 * */
275 function changeColor() {
276 for ( var i=0; i<tbody.rows.length; i++ ) {
277
278 var checkbox = tbody.rows[i].querySelector('input');
279
280 //如果当前行是选中的，那么就不需要重新设置隔行变色
281 if ( !checkbox.checked ) {
282 if ( i % 2 == 0 ) {
283 //偶数行
284 tbody.rows[i].className = 'c1';
285 tbody.rows[i].oldColor = 'c1';
286 } else {
287 //奇数行
288 tbody.rows[i].className = 'c2';
289 tbody.rows[i].oldColor = 'c2';
290 }
291 }
292
293 }
294 }
295
296 /*
297 * 排序
298 * */
299 function order(orderName, orderBy) {
300
301 var rows = [];
302
303 for ( var i=0; i<tbody.rows.length; i++ ) {
304 rows.push(tbody.rows[i]);
305 }
306
307 rows.sort(function(a, b) {
308
309 var v1;
310 var v2;
311
312 //需要根据orderName和orderBy来排序
313
314 if ( orderName == 'id' ) {
315 v1 = parseFloat(a.cells[1].innerHTML);
316 v2 = parseFloat(b.cells[1].innerHTML);
317 }
318
319 if ( orderName == 'age' ) {
320 v1 = parseFloat(a.cells[4].innerHTML);
321 v2 = parseFloat(b.cells[4].innerHTML);
322 }
323
324 //asc : 升序
325 //desc : 降序
326 if (orderBy == 'asc') {
327 return v1 - v2;
328 } else {
329 return v2 - v1;
330 }
331
332 });
333
334 //console.log(rows)
335 for (var i=0; i<rows.length; i++) {
336 tbody.appendChild(rows[i]);
337 }
338 changeColor();
339 }
340 }
341 </script>
342 </head>
343
344 <body>
345 <form id="form1">
346 <input type="text" name="username" />
347 <select name="sex">
348 <option value="">请选择一个性别</option>
349 <option value="男">男</option>
350 <option value="女">女</option>
351 </select>
352 <input type="text" name="age" />
353 <input type="button" name="btn" value="提交">
354 </form>
355 <!--选做-->
356 <p>
357 <form id="form2">
358 <select name="orderName">
359 <option value="">选择一个排序字段</option>
360 <option value="id">编号</option>
361 <option value="age">年龄</option>
362 </select>
363 <select name="orderBy">
364 <option value="">选择一个排序方式</option>
365 <option value="asc">升序</option>
366 <option value="desc">降序</option>
367 </select>
368 <input type="button" name="orderButton" value="排序">
369 </form>
370 </p>
371 <table border="1" width="100%" id="tab1">
372 <thead>
373 <tr>
374 <th>全选 <input type="checkbox" id="checkAll"></th>
375 <th>编号</th>
376 <th>姓名</th>
377 <th>性别</th>
378 <th>年龄</th>
379 <th>操作</th>
380 </tr>
381 </thead>
382 <tbody></tbody>
383 </table>
384 </body>
385 </html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
