标签：
我们在操作div ul li的时候一般都是用document.getElementById和document.getElementsTagName选择器来选择元素，而当我们操作表格应用的时候有更简便的JS操作方式；
比如：tBodies, //选择表格身体tbody
tHead, //选择表格头部，一个表格中只能含有一个头部
tFoot, //选择表格尾部，一个表格中只能含有一个尾部
rows, //tr的每一行
cells。 //每一列
<!DOCTYPE html>
<html>
<head>
<title>隔行变色</title>
</head>
<body>
<table border="1" width="500" id="tab1">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>王二</td>
<td>33</td>
</tr>
<tr>
<td>4</td>
<td>赵五</td>
<td>56</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var Otab = document.getElementById(‘tab1‘);
var Ocol =‘‘;
for(var i=0;i<Otab.tBodies[0].rows.length;i++){
Otab.tBodies[0].rows[i].onmouseover=function(){
Ocol= this.style.background;
this.style.background=‘red‘;
};
Otab.tBodies[0].rows[i].onmouseout=function(){
this.style.background=Ocol;
};
if(i%2){
Otab.tBodies[0].rows[i].style.background=‘#CCC‘;
}else{
Otab.tBodies[0].rows[i].style.background=‘‘;
}
}
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/BinXu/p/5723058.html
