Jquery實現(xiàn)對Table表格奇偶行設置顏色及移動鼠標行變色
2016.07.27 | 2107閱讀 | 0條評論 | javascript
//頁面加載,調(diào)用js
$(document).ready(function () {
pageLoad(); //頁面加載，隔行變色
});
//頁面加載時，對Table表格移動鼠標行變色操作，通用方法
function pageLoad() {
//table 中設置class屬性[class= msgtable]
$("table[class=msgtable]").each(function () {
var _this = $(this);
//設置偶數(shù)行和奇數(shù)行顏色
_this.find("tr:even").css("background-color", "#f8f8f8");
_this.find("tr:odd").css("background-color", "#f0f0f0");
//鼠標移動隔行變色hover用法關鍵
_this.find("tr:not(:first)").hover(function () {
$(this).attr("bColor", $(this).css("background-color")).css("background-color", "#E0E0E0").css("cursor", "pointer");
}, function () {
$(this).css("background-color", $(this).attr("bColor"));
});
});
}
發(fā)表評論