首先看HTML代码
01 <h1>会员信息表</h1>
02 <table summary="user infomation table">
03 <thead>
04 <tr>
05 <th>会员ID</th>
06 <th>会员名</th>
07 <th>邮箱</th>
08 <th>会员组</th>
09 <th>城市</th>
10 <th>注册时间</th>
11 </tr>
12 </thead>
13 <tbody>
14 <tr>
15 <td>126</td>
16 <td>webw3c</td>
17 <td>este@126.com</td>
18 <td>普通会员</td>
19 <td>武汉</td>
20 <td>2011-04-01</td>
21 </tr>
22 <tr>
23 <td>127</td>
24 <td>test001</td>
25 <td>test001@126.com</td>
26 <td>普通会员</td>
27 <td>北京</td>
28 <td>2011-04-03</td>
29 </tr>
30 <tr>
31 <td>128</td>
32 <td>wuliao</td>
33 <td>wuliao@126.com</td>
34 <td>普通会员</td>
35 <td>南昌</td>
36 <td>2011-04-04</td>
37 </tr>
38 <tr>
39 <td>129</td>
40 <td>tired</td>
41 <td>tired@126.com</td>
42 <td>中级会员</td>
43 <td>北京</td>
44 <td>2011-04-06</td>
45 </tr>
46 <tr>
47 <td>130</td>
48 <td>tiredso</td>
49 <td>tireds0@126.com</td>
50 <td>中级会员</td>
51 <td>武汉</td>
52 <td>2011-04-06</td>
53 </tr>
54 <tr>
55 <td>131</td>
56 <td>javascript</td>
57 <td>js2011@126.com</td>
58 <td>中级会员</td>
59 <td>武汉</td>
60 <td>2011-04-08</td>
61 </tr>
62 <tr>
63 <td>132</td>
64 <td>jQuery</td>
65 <td>jQuery@126.com</td>
66 <td>高级会员</td>
67 <td>北京</td>
68 <td>2011-04-12</td>
69 </tr>
70 </tbody>
71 </table>
72 </div>
javascript部分代码：
01 //动态给js添加class属性
02 function addClass(element, value) {
03 if(!element.className) {
04 element.className = value; //如果element本身不存在class,则直接添加class为value的值
05 } else {
06 element.className += " "+value; //如果element之前有一个class值，注意中间要多一个空格,然后再加上value的值
07 }
08 }
09
10 //隔行换色
11 function stripeTable() {
12 var tables = document.getElementsByTagName("table"); //遍历文档中的所有table
13 for(var i=0; i<tables.length; i++) {
14 var rows = document.getElementsByTagName("tr");
15 for(var j=0; j<rows.length; j++) {
16 if(j%2 == 0) {
17 addClass(rows[j], "odd"); //如是偶数行，则添加class为odd的属性
18 //rows[j].setAttribute("class", "odd");
19 }
20 }
21 }
22 }
23
24 //鼠标经过时高亮
25 function highlightRows() {
26 var rows = document.getElementsByTagName("tr");
27 for(var i=0; i<rows.length; i++) {
28 rows[i].oldClassName = rows[i].className; //首先保存之前的class值
29 rows[i].onmouseover = function() {
30 addClass(this, "highlight"); //鼠标经过时添加class为highlight的值
31 }
32 rows[i].onmouseout = function() {
33 this.className = this.oldClassName; //鼠标离开时还原之前的class值
34 }
35 }
36 }
37
38 window.onload = function() {
39 stripeTable();
40 highlightRows();
41 }
css部分代码：
01 * {
02 padding:0;
03 margin:0;
04 }
05
06 body {
07 font-family:verdana;
08 font-size:12px;
09 }
10
11 .content {
12 width:550px;
13 margin:20px auto;
14 }
15
16 .content h1 {
17 font-family:'微软雅黑';
18 font-size:18px;
19 padding-bottom:5px;
20 }
21
22 table {
23 width:100%;
24 }
25
26 th, td {
27 padding:6px 0;
28 text-align:center;
29 }
30
31 th {
32 background-color:#007D28;
33 color:#ffffff;
34 }
35
36 tr {
37 background-color:#E8FFE8;
38 }
39
40 .odd {
41 background-color:#FFF3EE;
42 }
43
44 .highlight {
45 background-color:#E0E0E0;
46 }
在下页中我们可以查看完整代码示例：
完整代码示例
"
66
==
79
