<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
//tbody 可能有多个 用tBodies rows行 cells列
// alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);//张三
window.onload = function(){
var oTab = document.getElementById("tab1");
var oldColor = "";
//隔行变色
for(var i = 0 ; i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].onmouseover = function(){
oldColor = this.style.background;//存一下放上去的颜色
this.style.background = "green";
}
oTab.tBodies[0].rows[i].onmouseout = function(){
// this.style.background = "";//这样会出现一个问题 清除了以前的颜色 解决这个问题就是把以前的颜色存一下
this.style.background = oldColor;
}
if(i%2)
{
oTab.tBodies[0].rows[i].style.background = "#ccc";
}else{
oTab.tBodies[0].rows[i].style.background = "";
}
}
}
</script>
<body>
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>