JavaScript实例---表格隔行变色以及移入鼠标高亮 

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>index</title>
 6 <style type="text/css">
 7     #div1{width: 100px;height:100px;background: red;}
 8 </style>
 9 <script type="text/javascript">
10 window.onload = function()
11 {
12     var oTab = document.getElementById('tab1');//getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
13     var oldColor = '';
14     for(var i=0;i<oTab.tBodies[0].rows.length;i++)
15     {
16             oTab.tBodies[0].rows[i].onmouseover = function()//onmouseover 属性在鼠标指针移动到元素上时触发。
17         {
18             oldColor = this.style.background;
19             this.style.background = "green";
20         }
21                 oTab.tBodies[0].rows[i].onmouseout = function() //onmouseout 事件会在鼠标指针移出指定的对象时发生。
22                 {
23           this.style.background = oldColor;
24 } 
25         if(i%2)
26         {
27             oTab.tBodies[0].rows[i].style.background = 'red';
28         }
29         else
30         {
31             oTab.tBodies[0].rows[i].style.background= "blue";
32         }
33     }
34 }
35  
36 </script>
37 </head>
38 <body>
39        <table border="1" width="300" id="tab1">
40         <thead>
41             <td>ID</td>
42             <td>NAME</td>
43             <td>AGE</td>
44         </thead>
45         <tbody>
46             <tr>
47                 <td>1</td>
48                 <td>John</td>
49                 <td>27</td>
50             </tr>
51             <tr>
52                 <td>2</td>
53                 <td>Lucy</td>
54                 <td>27</td>
55             </tr>
56             <tr>
57                 <td>3</td>
58                 <td>Dan</td>
59                 <td>26</td>
60             </tr>
61             <tr>
62                 <td>4</td>
63                 <td>Ben</td>
64                 <td>30</td>
65             </tr>
66         </tbody>
67     </table>
68 </body>
69 </html>
View Code

 

posted @ 2015-07-12 18:48  kinghold  Views(209)  Comments(0)  Edit  收藏  举报