table中嵌套table，如何用jquery来控制奇偶行颜色

浏览数：25 / 时间：2015年06月09日

总是要趁着自己还有记忆的时候，把该记录下来的都记录下来，着实是不敢恭维自己的记性。

相信很多时候，我们前端人员，经常会用到table里面的某个td中还嵌套着table，而这个时候还总要去弄奇偶行的颜色，里面那个嵌套的table也要弄。

今天就是这样。如果只是单纯弄最外层的table还好一点。

闲话不多说，先贴个效果图把。

　　当然我不会把全部的代码都贴出来，相信大家也写得出来。

　　首先最外层的table，我们给它一个class="even_a_mid",给最外层的奇偶行赋予颜色

$(".even_a_mid tr:even").css("background","#eee");

　　然后给里面的table赋予颜色，开始需求人员说，这个里面嵌套一个table，所以我的写法是这样的。期间，是遇到一个问题的——$(".even_a_mid tr:eq(index) table tr:even").css("background","red");当我这样写时，就没有效果。原因是——eq作为选择器的时候不支持变量，只支持大于等于0的正整数。当你用变量，负数，小数的时候，程序都会把它转换成0。故而改了下面就ok了。

    var index = $(".even_a_mid tr").has("table").index();
    $(".even_a_mid tr:eq(‘"+index+"‘) table tr:even").css("background","red");

　　事实上，如果里面嵌套多个table，后面的基本没用了。因为$(".even_a_mid tr").has("table")这部分是一个数组，所以index方法则无效了。接下来要做的事情是，要得到遍历这个数组，等得到每行的index，然而事与愿违。所以换了种方式。

$(".even_a_mid tr").has("table").each(function() {
        $(this).find("table tr:even").css("background","#fff");
        $(this).find("table tr:odd").css("background","#eee");
});