释放双眼，带上耳机，听听看~！
对上篇博客的最后那个表格隔行高亮显示加了个功能，鼠标监听和年龄从小到大排序。
演示代码：
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
2 <head>
3 <title>DHTML技术演示---表格中页面中的显示操纵--行间隔高亮显示</title>
4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5 <style type="text/css">
6 @import url(table.css);
7 .one{
8 background:#00ff00;
9 }
10 .two{
11 background:rgb(210,0,0);
12 }
13 .over{
14 background-color:#ffff00;
15 }
16 </style>
17 <script type="text/javascript">
18 function trColor(){
19 var oTableNode = document.getElementById("dataTable");
20 var arrTrs = oTableNode.rows;//rows为表格属性，返回所以的行
21 for(var x=1;x<arrTrs.length; x++){
22 if(x%2==1){
23 arrTrs[x].className="one";
24 }else{
25 arrTrs[x].className="two";
26 }
27 //为每一行动态注册事件处理方法
28 var oldClassName;
29 arrTrs[x].onmouseover=function(){
30 //监听鼠标-移动到那一行
31 oldClassName=this.className;
32 this.className="over";
33 };
34 arrTrs[x].onmouseout=function(){
35 //鼠标监听-移开
36 this.className=oldClassName;
37 };
38
39 }
40
41 }
42 //onload = trColor();//这种方式赋值就是执行(本例中，这一句没有效果，因为table对象还没出来。
43 //但如果把该段代码放在<table>之后则有效果)，而且只能执行这一个方法
44
45 onload=function(){
46 trColor();
47 //还可以在这里写其它代码，甚至调用其它函数
48 };
49 //这种方式只是给onload事件注册响应函数，解析该句代码时函数并没有执行
50 //而是在该事件发生时才会调用。并且可以在function()中调用多个函数.
51
52 </script>
53
54
55 <script type="text/javascript">
56 function sortTable(){
57 var oTableNode = document.getElementById("dataTable");
58 var arrTrs = oTableNode.rows;
59 //思路：用一个新的容器来存放表格的行对象数组，并在新数组中进行排序,把排序后的每个元素(行对象)依次添加到表格对象中
60
61 //放到新容器arrTrs2中
62 var arrTrs2 = [];
63 for (var x = 1; x < arrTrs.length; x++) {
64 arrTrs2[x - 1] = arrTrs[x];
65 }
66 //arrTrs2数组可以看成arrTrs数组的引用
67
68 //对容器arrTrs2中的元素进行排序
69 mySort(arrTrs2);
70
71 //把排序后的行对象重新加到表格中
72 for (var x = 0; x < arrTrs2.length; x++) {
73 //arrTrs2[x].parentNode.nodeName//TBODY
74 arrTrs2[x].parentNode.appendChild(arrTrs2[x]);
75 //arrTrs2数组可以看成arrTrs数组的引用
76 }
77
78 }
79
80 function mySort(arr){
81 for(var x=0;x<arr.length-1;x++){
82 for(var y=x+1;y<arr.length;y++){
83 if(parseInt(arr[x].cells[1].innerText) > parseInt(arr[y].cells[1].innerText)){
84 var temp = arr[x];
85 arr[x] = arr[y];
86 arr[y] = temp;
87 }
88 }
89 }
90 }
91
92 </script>
93
94
95 </head>
96
97 <body>
98 <table id="dataTable">
99 <tr>
100 <th>姓名</th> <th><a href="javascript:void(0)" onclick="sortTable()">年龄</a></th> <th>地址</th>
101 </tr>
102
103 <tr>
104 <td>张三</td> <td>23</td> <td>湖南长沙</td>
105 </tr>
106 <tr>
107 <td>李四</td> <td>24</td> <td>湖南长沙</td>
108 </tr>
109 <tr>
110 <td>王五</td> <td>53</td> <td>湖南长沙</td>
111 </tr>
112 <tr>
113 <td>Jack</td> <td>65</td> <td>湖南长沙</td>
114 </tr>
115 <tr>
116 <td>Rose</td> <td>13</td> <td>湖南长沙</td>
117 </tr>
118 <tr>
119 <td>Jack</td> <td>8</td> <td>湖南长沙</td>
120 </tr>
121 <tr>
122 <td>Rose</td> <td>73</td> <td>湖南长沙</td>
123 </tr>
124 <tr>
125 <td>Jack</td> <td>29</td> <td>湖南长沙</td>
126 </tr>
127 <tr>
128 <td>Rose</td> <td>20</td> <td>湖南长沙</td>
129 </tr>
130 </table>
131
132 </body>
133</html>
134
135
table.css:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2 border:#ff80ff 1px solid;
3 /*solid : 实线边框 */
4 width:800px;
5 border-collapse:collapse;
6 /*separate : 默认值。边框独立（标准HTML）
7 collapse : 相邻边被合并
8 */
9}
10table td{/*table 下面的td*/
11 border:#0000ff 1px solid;
12 padding:5px;/*内补丁*/
13}
14table th{
15 border:#ff80ff 1px solid;
16 padding:5px;
17 background-color:#c0c0c0;
18}
19
演示结果：
鼠标监听：
点一下年龄：实现表格按年龄从小到大排序
现在我们觉得上面的不好，只能从小到大排序，而且排序后颜色也变了。不好看，现在我们来对它进行改进。
代码演示：
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
2 <head>
3 <title>DHTML技术演示---表格中页面中的显示操纵--行间隔高亮显示</title>
4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5 <style type="text/css">
6 @import url(table.css);
7 .one{
8 background:#00ff00;
9 }
10 .two{
11 background:rgb(210,0,0);
12 }
13 .over{
14 background-color:#ffff00;
15 }
16 a{
17 text-decoration:none;/*装饰-去掉下划线*/
18 }
19 </style>
20 <script type="text/javascript">
21 function trColor(){
22 var oTableNode = document.getElementById("dataTable");
23 var arrTrs = oTableNode.rows;//rows为表格属性，返回所以的行
24 for(var x=1;x<arrTrs.length; x++){
25 if(x%2==1){
26 arrTrs[x].className="one";
27 }else{
28 arrTrs[x].className="two";
29 }
30 //为每一行动态注册事件处理方法
31 var oldClassName;
32 arrTrs[x].onmouseover=function(){
33 //监听鼠标-移动到那一行
34 oldClassName=this.className;
35 this.className="over";
36 };
37 arrTrs[x].onmouseout=function(){
38 //鼠标监听-移开
39 this.className=oldClassName;
40 };
41
42 }
43
44 }
45 //onload = trColor();//这种方式赋值就是执行(本例中，这一句没有效果，因为table对象还没出来。
46 //但如果把该段代码放在<table>之后则有效果)，而且只能执行这一个方法
47
48 onload=function(){
49 trColor();
50 //还可以在这里写其它代码，甚至调用其它函数
51 };
52 //这种方式只是给onload事件注册响应函数，解析该句代码时函数并没有执行
53 //而是在该事件发生时才会调用。并且可以在function()中调用多个函数.
54
55 </script>
56
57
58 <script type="text/javascript">
59 var flag=true;
60 function sortTable(aNode){
61 var oTableNode = document.getElementById("dataTable");
62 var arrTrs = oTableNode.rows;
63 //思路：用一个新的容器来存放表格的行对象数组，并在新数组中进行排序,把排序后的每个元素(行对象)依次添加到表格对象中
64
65 //放到新容器arrTrs2中
66 var arrTrs2 = [];
67 for (var x = 1; x < arrTrs.length; x++) {
68 arrTrs2[x - 1] = arrTrs[x];
69 }
70 //arrTrs2数组可以看成arrTrs数组的引用
71
72 //对容器arrTrs2中的元素进行排序
73 mySort(arrTrs2);
74
75 //把排序后的行对象重新加到表格中
76 if(flag){
77 for (var x = 0; x < arrTrs2.length; x++) {
78 //arrTrs2[x].parentNode.nodeName//TBODY
79 arrTrs2[x].parentNode.appendChild(arrTrs2[x]);
80 //arrTrs2数组可以看成arrTrs数组的引用
81 }
82 aNode.innerHTML="年龄↑";
83 }else{
84 for(var x=arrTrs2.length-1;x>=0;x--){
85 arrTrs2[x].parentNode.appendChild(arrTrs2[x]);
86 }
87 aNode.innerHTML="年龄↓";
88 }
89 flag = !flag;
90 trColor();
91 }
92
93 function mySort(arr){
94 for(var x=0;x<arr.length-1;x++){
95 for(var y=x+1;y<arr.length;y++){
96 if(parseInt(arr[x].cells[1].innerText) > parseInt(arr[y].cells[1].innerText)){
97 var temp = arr[x];
98 arr[x] = arr[y];
99 arr[y] = temp;
100 }
101 }
102 }
103 }
104
105 </script>
106
107
108 </head>
109
110 <body>
111 <table id="dataTable">
112 <tr>
113 <th>姓名</th> <th><a href="javascript:void(0)" onclick="sortTable(this)">年龄</a></th> <th>地址</th>
114 </tr>
115
116 <tr>
117 <td>张三</td> <td>23</td> <td>湖南长沙</td>
118 </tr>
119 <tr>
120 <td>李四</td> <td>24</td> <td>湖南长沙</td>
121 </tr>
122 <tr>
123 <td>王五</td> <td>53</td> <td>湖南长沙</td>
124 </tr>
125 <tr>
126 <td>Jack</td> <td>65</td> <td>湖南长沙</td>
127 </tr>
128 <tr>
129 <td>Rose</td> <td>13</td> <td>湖南长沙</td>
130 </tr>
131 <tr>
132 <td>Jack</td> <td>8</td> <td>湖南长沙</td>
133 </tr>
134 <tr>
135 <td>Rose</td> <td>73</td> <td>湖南长沙</td>
136 </tr>
137 <tr>
138 <td>Jack</td> <td>29</td> <td>湖南长沙</td>
139 </tr>
140 <tr>
141 <td>Rose</td> <td>20</td> <td>湖南长沙</td>
142 </tr>
143 </table>
144
145 </body>
146</html>
147
148
演示结果：
