<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interlaced discoloration</title>
<style>
table{
200px;
height: 300px;
background-color: pink;
text-align: center;
margin:0 auto;
border-spacing: 0;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>TH1</th>
<th>TH2</th>
<th>TH3</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
</tr>
<tr>
<td>E1</td>
<td>E2</td>
<td>E3</td>
</tr>
<tr>
<td>F1</td>
<td>F2</td>
<td>F3</td>
</tr>
</tbody>
</table>
<script>
var trs = document.getElementsByTagName("tr");
for(var i=1;i<trs.length;++i){
trs[i].style.backgroundColor = i%2==0?"#f40":"#f10215";
var temp = trs[i].style.backgroundColor;
trs[i].setAttribute("temp",temp);
trs[i].onmouseover = function () {
this.style.backgroundColor = "lightgreen";
}
trs[i].onmouseout = function () {
this.style.backgroundColor = this.getAttribute("temp");
}
}
</script>
</body>
</html>