表格高亮

引用：http://blog.163.com/ms8712@126/blog/static/1899099120122934023200/

//js实现隔行变色

window.οnlοad=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].οnmοuseοut=function(){  

this.className="even";  

};  

}else{  

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

otal.rows[i].οnmοuseοut=function(){  

this.className="normal";  

}  

}  

otal.rows[i].οnmοuseοver=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{ 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>

实例效果: