引用：http://blog.163.com/ms8712@126/blog/static/1899099120122934023200/
//js实现隔行变色
window.onload=function(){
var otal=document.getElementById("otable");
for(var i=0; i<otal.rows.length; 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
});
})
<style type="text/css">
table{ border-collapse:collapse;}
.datalist{ 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>
实例效果:
