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

时间:2024-08-02 21:37:08

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

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

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

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

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

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

  首先最外层的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");
});

  最后终于就ok了。

  源码链接:http://runjs.cn/detail/vvh9ilip