jquery實作效果比較好的table選中行顏色_jquery

jquery table選取行顏色(效果更好)

複製程式碼 程式碼如下:

.table-tr-title{
高度：26px;
字體大小：12px;
文字對齊：居中；
}
.table-tr-content{
高度：18px;
背景：#FFFFFF；
文字對齊：居中；
背景：#FFFFFF;
文字對齊：居中；
字型大小：12px;
}
.normalEvenTD{
背景：#DFD8D8;
}
.normalOddTD{
背景：#FFFFFFFF;
.normalOddTD{
背景：#FFFFFFFF;
}
. hoverTD{
背景顏色：#eafcd5;
高度：18px;
文字對齊：居中；
字體大小：12px;
}
.trSelected{
背景顏色： #51b2f6;
高度：18px;
文字對齊：居中；
字體大小：12px;
}
樣式>
頭>
>
align=“center”cellpadding=“0”cellspacing=“1” " bgcolor="#c0de98">

標題
標題
標題
標題


資料
資料
資料
資料


數據
數據
數據
資料


資料
資料
資料
資料


資料
數據
數據
數據


資料
數據
數據
數據


資料
資料
資料
資料


數據
數據
數據
資料


資料
資料
資料
資料


資料
數據
數據
數據


資料
數據
數據
數據


資料
資料
資料
資料


數據
數據
數據
數據 身體>
js程式碼：

複製程式碼 程式碼如下:

<script> <BR>$(function(){ <BR>///////datagrid選取行變色與滑鼠經過行變色/////////////// <BR>var dtSelector = ".list"; <BR>var tbList = $(dtSelector); <br><br>tbList.each( function() { <BR>var self = this; <BR>$("tr:even:not(:first)", $(self)).addClass("normalEvenTD"); // 從標頭行下一行開始的奇數行，行數：（1，3，5...） <BR>$("tr:odd", $(self)).addClass("normalOddTD"); // 從標頭行下一行開始的偶數行，行數：（2，4，6...） <br><br>// 滑鼠經過的行變色<BR>$("tr:not(:first)", $(self) ).hover( <BR>function () { $(this).addClass('hoverTD');$(this).removeClass('table-td-content'); }, <BR>function () { $( this).removeClass('hoverTD');$(this).addClass('table-td-content'); } <BR>); <br><br>// 選擇行變色<BR>$("tr ", $(self)).click(function (){ <BR>var trThis = this; <BR>$(self).find(".trSelected").removeClass('trSelected'); <BR>if ( $(trThis).get(0) == $("tr:first", $(self)).get(0)){ <BR>return; <BR>} <BR>$(trThis).addClass( 'trSelected'); <BR>}); <BR>}); <BR>}); <BR></script>

效果顯示：