表格列点击排序
實現點擊表格列實現排序的效果，按照一列一列的排序
代碼如下：
1 排序代碼
2
3 <!DOCTYPE html>
4 <html lang="en">
5 <head>
6 <meta charset="UTF-8">
7 <title>Title</title>
8 <style>
9 table{
10 border-collapse: collapse;
11 }
12 th,td{
13 height: 30px;
14 width: 80px;
15 border: 1px solid black;
16 text-align: center;
17 margin: 0;
18
19 }
20 .content{
21 margin: auto;
22 }
23 </style>
24 </head>
25 <body>
26 <div class="content">
27 <table>
28 <thead>
29 <tr>
30 <th>姓名</th>
31 <th id="mathBtn">數學</th>
32 <th id="artBtn">語文</th>
33 <th id="EngBtn">英語</th>
34 <th id="allScore">總分</th>
35 </tr>
36 </thead>
37 <tbody>
38 <tr><td>小明</td><td>80</td><td>90</td><td>70</td><td>120</td></tr>
39 <tr><td>小紅</td><td>1</td><td>60</td><td>3</td><td>10</td></tr>
40 <tr><td>小劉</td><td>50</td><td>49</td><td>68</td><td>210</td></tr>
41 <tr><td>小張</td><td>20</td><td>30</td><td>40</td><td>100</td></tr>
42 </tbody>
43 </table>
44 </div>
45 <script type="text/javascript">
46 /*
47 *
48 *,compare比較函數
49 *這里使用匿名函數解決閉包問題
50 *
51 * */
52 window.onload=function() {
53 var bjuge = false;
54 var body = document.getElementsByTagName("tbody")[0];
55 var th = document.getElementsByTagName("th");//為什么點擊事件沒有發生呢
56 for (var k = 1; k < 5; k++) {
57 th[k].onclick =function(k){
58 return function () {
59 var temp = new Array(4);
60 for (var i = 0; i < 4; i++) {
61 temp[i] = body.children[i].getElementsByTagName("td")[k].innerText;
62 }
63 function compare2(value1, value2) {
64 return value1 - value2;
65 }
66 if (bjuge == true) {
67 temp = temp.sort(compare2);
68 bjuge = false;
69 } else {
70 temp = temp.reverse(temp.sort(compare2));
71 bjuge = true;
72 }
73 for (var m = 0; m < 4; m++) {
74 for (var j = 0; j < 4; j++) {
75 if (body.children[j].getElementsByTagName("td")[k].innerText == temp[m]) {
76 body.children[m].parentNode.insertBefore(body.children[j], body.children[m]);
77 }
78 }
79 }
80 }
81 }(k)
82 }
83 }
84 </script>
85 </body>
86 </html>
筆記：
總結
- 上一篇： cmd简单代码雨的方法
- 下一篇： 如何在java中使用retainAll取