用js或Jquery实现table隔行变色以…

//js实现隔行变色

window.onload=function(){

var otal=document.getElementByIdx_x_x("otable");

for(var i=0; i

if(i%2==0){  

otal.rows[i].className="even";  

otal.rows[i].onmouseout=function(){  

this.className="even";  

};  

}else{  

otal.rows[i].className="normal";  

otal.rows[i].onmouseout=function(){  

this.className="normal";  

}  

}  

otal.rows[i].onmouseover=function(){  

this.className="over";  

}  

} 

}

//jQuery隔行变色

$(function(){

$(".datalist tr:odd").addClass("even");

 

  $(".datalist tr").mouseover(function(){   

//如果鼠标移到class为stripe的表格的tr上时，执行函数

$(this).addClass("over");//给这行添加class值为over，并且当鼠标一出该行时执行函数

});

$(".datalist tr").mouseout(function(){

$(this).removeClass("over");  //移除该行的class

});

})

table{ border-collapse:collapse;}

.datalist{ width:300px; line-height:20px;}

.datalist th{ background:#FCF;}

.datalist td{border:1px solid #000;}

.even{ background:#F9F; color:#000;}

.normal{background:#fff; color:#000;}

.over{background:#bcd4ec; color:#000;  }

<style type="text/css">

table{ border-collapse:collapse;}

.datalist{ width:300px; line-height:20px;}

.datalist th{ background:#FCF;}

.datalist td{border:1px solid #000;}

.even{ background:#F9F; color:#000;}

.normal{background:#fff; color:#000;}

.over{background:#bcd4ec; color:#000;  }

</style>

<table class="datalist" id="otable" border="0">

<tr>

<td>aaaaaa</td>

<td>aaaaaa</td>

<td>aaaaaa</td>

</tr>

<tr>

<td>aaaaaa</td>

<td>aaaaaa</td>

<td>aaaaaa</td>

</tr>

<tr>

<td>aaaaaa</td>

<td>aaaaaa</td>

<td>aaaaaa</td>

</tr>

<tr>

<td>aaaaaa</td>

<td>aaaaaa</td>

<td>aaaaaa</td>

</tr>

<tr>

<td>aaaaaa</td>

<td>aaaaaa</td>

<td>aaaaaa</td>

</tr>

<tr>

<td>aaaaaa</td>

<td>aaaaaa</td>

<td>aaaaaa</td>

</tr>

</table>