点滴积累【JS】---JS小功能（列表页面隔行变色）
效果：
代码：
1 <head runat="server"> 2 <title></title> 3 <script type="text/javascript"> 4 window.onload = function () { 5 var otab = document.getElementById('tab1'); 6 var thiscolor = ''; 7 for (var i = 0; i < otab.tBodies[0].rows.length; i++) { 8 otab.tBodies[0].rows[i].onmouseover = function () { 9 thiscolor = this.style.background; 10 this.style.background = '#00FFFF'; 11 }; 12 otab.tBodies[0].rows[i].onmouseout = function () { 13 this.style.background = thiscolor; 14 }; 15 if (i % 2) { 16 otab.tBodies[0].rows[i].style.background = ''; 17 } 18 else { 19 otab.tBodies[0].rows[i].style.background = '#FFFF00'; 20 } 21 } 22 }; 23 </script> 24 </head> 25 <body> 26 <table id="tab1" border="1" style="text-align: center; width: 500px; margin: 200px auto"> 27 <thead> 28 <tr style="background-color: #FF0000"> 29 <td> 30 种族名称 31 </td> 32 <td> 33 种族简称 34 </td> 35 <td> 36 英雄 37 </td> 38 </tr> 39 </thead> 40 <tbody> 41 <tr> 42 <td> 43 人类联盟 44 </td> 45 <td> 46 HUM 47 </td> 48 <td> 49 代表性英雄：AM 50 </td> 51 </tr> 52 <tr> 53 <td> 54 兽人部落 55 </td> 56 <td> 57 ORC 58 </td> 59 <td> 60 代表性英雄：BM 61 </td> 62 </tr> 63 <tr> 64 <td> 65 不死亡灵 66 </td> 67 <td> 68 UD 69 </td> 70 <td> 71 代表性英雄：DK 72 </td> 73 </tr> 74 <tr> 75 <td> 76 暗夜精灵 77 </td> 78 <td> 79 NE 80 </td> 81 <td> 82 代表性英雄：DH 83 </td> 84 </tr> 85 </tbody> 86 </table> 87 </body>
