引用：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> 實例效果:

總結

以上是生活随笔為你收集整理的表格高亮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。