点滴积累【JS】---JS小功能（列表页面隔行变色）-优快云博客

本文展示了一个使用纯JavaScript实现的魔兽争霸种族及其英雄介绍表格。该表格具有鼠标悬停时改变背景颜色的效果，并且不同行采用不同的背景色进行区分。通过简单的代码实现了良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

代码：

 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>