table 隔行变色,而且鼠标经过时变色

table 隔行变色,并且鼠标经过时变色.

HTML样式:

 

table 隔行变色,并且鼠标经过时变色.

 

代码如下:

 

js代码如下：

<script language="javascript">
function show(){
var tab=document.getElementById("tab");
var tr=tab.getElementsByTagName("tr"); 
for(var i=0;i<=tr.length;i++){
 if(i%2==0){
 tr[i].style.backgroundColor="#ccc";
 tr[i].onmouseover=function(){this.style.background="red"};
 tr[i].onmouseout=function(){this.style.background="#ccc"}
 }else{
 tr[i].style.backgroundColor="#fff";
 tr[i].onmouseover=function(){this.style.background="red"};
 tr[i].onmouseout=function(){this.style.background="#fff"}
 }
}
}
window.onload=show;
</script>

html代码如下：
<table id="tab">
<tr><td>dfdsf</td><td>dfdsf</td></tr>
<tr><td>dfdsf</td><td>dfdsf</td></tr>
<tr><td>dfdsf</td><td>dfdsf</td></tr>
<tr><td>dfdsf</td><td>dfdsf</td></tr>
<tr><td>dfdsf</td><td>dfdsf</td></tr>
</table>


本文转载自web前端寒风:http://www.uedcss.com/post/tablechangecolor.html