1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script type="text/javascript">
7 window.onload=function(){
8 var oTab=document.getElementById('tab1')
9 var oldColor=''
10 for(i=0;i<oTab.tBodies[0].rows.length;i++){
11 oTab.tBodies[0].rows[i].onmouseover=function(){
12 oldColor=this.style.background
13 this.style.background='orange';}
14 oTab.tBodies[0].rows[i].onmouseout=function(){
15 this.style.background=oldColor;
16 }
17 if(i%2){
18 oTab.tBodies[0].rows[i].style.background=''
19 }
20 else{
21 oTab.tBodies[0].rows[i].style.background='gray'
22 }
23 }
24 }
25 </script>
26 </head>
27 <body>
28 <table id="tab1" border="1" width="400" cellpadding="15" >
29 <caption>DOM高级操作试用表</caption>
30 <thead>
31 <td>序号</td>
32 <td>名字</td>
33 <td>年龄</td>
34 </thead>
35 <tbody>
36 <tr>
37 <td>1</td>
38 <td>赵毅</td>
39 <td>18</td>
40 </tr>
41 <tr>
42 <td>2</td>
43 <td>钱军</td>
44 <td>20</td>
45 </tr>
46 <tr>
47 <td>3</td>
48 <td>孙火</td>
49 <td>22</td>
50 </tr>
51 <tr>
52 <td>4</td>
53 <td>李四</td>
54 <td>24</td>
55 </tr>
56 </tbody>
57 </table>
58 </body>
59 </html>