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>
时间： 2024-10-12 22:20:32