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


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

          相信很多时候,我们前端人员,经常会用到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");
    });
        

      最后终于就ok了。

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

  • 相关阅读:
    运算符的优先级
    % 取余运算 取模运算
    Java运算符,关系运算符
    自增自减 a++,++a,a--,--a
    Java运算符,算术运算符
    启用div作为编辑器 添加contentEditalbe = “true”,如何让在Html中特殊字符不被转义
    一个合格前端必看的书籍
    JQuery中eq()和get()的区别
    div,contenteditable编辑器之ctrl+enter换行,enter发送
    Angularjs 源码
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/3643639.html
Copyright © 2020-2023  润新知