龍巖易富通網(wǎng)絡(luò)科技有限公司

龍巖小程序開發(fā),龍巖分銷系統(tǒng)

Jquery實(shí)現(xiàn)對Table表格奇偶行設(shè)置顏色及移動(dòng)鼠標(biāo)行變色

2016.07.27 | 1770閱讀 | 0條評(píng)論 | javascript

//頁面加載,調(diào)用js

$(document).ready(function () {

            pageLoad();   //頁面加載,隔行變色

        });

 

//頁面加載時(shí),對Table表格移動(dòng)鼠標(biāo)行變色操作,通用方法

function pageLoad() {

 

    //table 中設(shè)置class屬性[class= msgtable]

    $("table[class=msgtable]").each(function () {

        var _this = $(this);

        //設(shè)置偶數(shù)行和奇數(shù)行顏色

        _this.find("tr:even").css("background-color", "#f8f8f8");

        _this.find("tr:odd").css("background-color", "#f0f0f0");

 

        //鼠標(biāo)移動(dòng)隔行變色hover用法關(guān)鍵

        _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ā)表評(píng)論