表格高亮

//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";  

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{ 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>

</tr>

</table>

執行個體效果: