jQuery table行变色

很多项目为了提高用户体验，会要求对table中的行在鼠标经过时提供变色处理。往往一个项目有很多歌table，我们是否需要逐个为所有table都加上行变色代码呢？如果真那样的话，会是一件很痛苦的事情...

先上效果：

 

js:

function TdRowOverOut(table) {

    // 鼠标经过时
    $("#" + table + " tr td").mouseover(function () {
        $(this).parent().find("td").css("background-color", "#4fbb65"); // 注意：此处改变的是该行所有td的背景色
        $(this).parent().find("td").css("color", "#FFFFFF"); // 如果需要，此处可改变字体颜色
        $(this).parent().find("td a").addClass("whiteColor"); // 有的td中加的是超链接，导致上面的改变字体颜色对所有的a就无效。此处单独处理
    });


    // 鼠标移除时
    $("#" + table + " tr td").mouseout(function () {       
        var bgc = $(this).parent().css("background-color"); // 获取tr背景色
        $(this).parent().find("td").css("background-color", bgc); // 改变所有td的背景色。此处读者可以理解为什么鼠标经过时改变的是td背景色而不是tr的背景色
        $(this).parent().find("td").css("color", '#000000'); // 恢复字体颜色
        $(this).parent().find("td a").removeClass("whiteColor"); // 恢复超链接的颜色。（whiteColor是定义的一个css类）
    });
}

 

HTML页面

<table id="tFactory">

...

</table> 

 

使用时，只需将table的id作为参数，调用上面的函数即可：

TdRowOverOut('tFactory')

当然，这个函数本身还可以进行优化，使其更具通用性，此处仅提供一种思路