1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>index</title> 6 <style type="text/css"> 7 #div1{ 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>