* 隔行变色和鼠标经过高亮显示
*/
HTML文件代码
<!DOCTYPE html>
<html>
<head>
<title>domTableOperate.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/domTableOperate.js"></script>
</head>
<body>
<table border="1" width="500px;" id="tab">
<thead>
<tr>
<td>ID</td>
<td>NAME</td>
<td>AGE</td>
<td>OPERATE</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>tom</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>wsm</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>ali</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>lisi</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>alid</td>
<td>18</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>skd</td>
<td>33</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>sawm</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>8</td>
<td>tim</td>
<td>20</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
js文件代码
window.onload = function(){
var otable = document.getElementById('tab');
var name = otable.tBodies[0].rows[1].cells[1].innerHTML;
var style = '';
for(var i=0;i<otable.tBodies[0].rows.length;i++){
otable.tBodies[0].rows[i].onmouseover = function(){
style= this.style.background;
this.style.background = 'green';
};
otable.tBodies[0].rows[i].onmouseout = function(){
this.style.background = style;
};
//隔行变色
if(i%2){
otable.tBodies[0].rows[i].style.background = '#CCC';
}else{
otable.tBodies[0].rows[i].style.background = '';
}
}
}