Effect:
Code:
Copy Code code as follows:
<title></title>
<script type= "Text/javascript" >
Window.onload = function () {
var otab = document.getElementById (' tab1 ');
var thiscolor = ';
for (var i = 0; i < otab.tbodies[0].rows.length; i++) {
Otab.tbodies[0].rows[i].onmouseover = function () {
Thiscolor = This.style.background;
This.style.background = ' #00FFFF ';
};
Otab.tbodies[0].rows[i].onmouseout = function () {
This.style.background = Thiscolor;
};
if (i% 2) {
Otab.tbodies[0].rows[i].style.background = ';
}
else {
Otab.tbodies[0].rows[i].style.background = ' #FFFF00 ';
}
}
};
</script>
<body>
<table id= "Tab1" border= "1" style= "text-align:center; width:500px; margin:200px Auto ">
<thead>
<tr style= "Background-color: #FF0000" >
<td>
Race name
</td>
<td>
Race abbreviation
</td>
<td>
Hero
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Human Union
</td>
<td>
HUM
</td>
<td>
Representative Hero: AM
</td>
</tr>
<tr>
<td>
Orc tribe.
</td>
<td>
ORC
</td>
<td>
Representative Hero: BM
</td>
</tr>
<tr>
<td>
Undead dead
</td>
<td>
Ud
</td>
<td>
Representative Hero: DK
</td>
</tr>
<tr>
<td>
Night Elf
</td>
<td>
NE
</td>
<td>
Representative Hero: DH
</td>
</tr>
</tbody>
</table>
</body>
