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

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

table中嵌套table,如何用jquery来控制奇偶行颜色的更多相关文章

  1. iview之——table中嵌套input、select等

    使用iview在table中嵌入button是比较常见的需求,但是在table中嵌入input或者select你是否考虑过呢?本文用实例介绍input和select在table中的嵌套. 理解tabl ...

  2. html table奇偶行颜色设置 (CSS选择器)

    :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型.n 可以是数字.关键词或公式. 下面的例子, 设置表格的奇偶行背景颜色不同:单独设置表格的第1列背景颜色不同. & ...

  3. 如何修改antd中表格的表头样式和奇偶行颜色交替

    在做antd表格时通常会用到table组件,但是table的表头时给定的,那么怎么修改表头的颜色呢? 这里用的时less的写法,在全局环境中写,所有的table表头都会变成自己定义的颜色 定义好表头的 ...

  4. Java如何使用while和for嵌套循环控制输出数据,使数据奇偶行不同

    /* 题目1 使用Eclipse编写控制台应用程, 使用while循环在控制台打印10行10列的如下图形 □ □ □ □ □ □ □ □ □ □ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ □ □ □ □ ...

  5. td中嵌套table,让table完全填充父元素td

    <table width="100% " cellspacing=0 cellpadding=0 border=1 > <tr> <td style= ...

  6. Lua中的table构造式(table constructor)

    最简单的构造式就是一个空构造式{},用于创建一个空table. 构造式还可以用于初始化数组.例如,以下语句:days = {"Sunday", "Monday" ...

  7. Java&Selenium处理页面Table以及Table中随机位置的数据

    一.摘要 前一段时间公司小伙伴刚刚接触自动化,遇到的一个问题,页面新创建的数据保存后,出现在table中的某个位置,并不一定是第一行还是第几行,这种情况下如何去操控它 本篇博文将介绍处理这个问题的一种 ...

  8. Bootstrap table插件 被选中的行颜色改变

    参考:https://www.jianshu.com/p/1bb4c37ef636 在 bootstrap-table.min.css 中修改源码 //选中行颜色 .fixed-table-conta ...

  9. Jquery Ajax 异步设置Table中某列的值

    可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...

随机推荐

  1. Linq to EF 与Linq to Object 使用心得

    大家都知道Linq既可以用来查询数据库对象(我这里指的是Entity FrameWork里的Model对象),也可以用来查询内存中的IEnumerable对象. 两者单独查询时都不会出现什么问题,不过 ...

  2. change Username for SVN(Subclipse) in Eclipse

    Subclipse does not own the information about users and passwords (credentials), so there is no way f ...

  3. 数组对象Vector用法

    import java.util.Vector; public class VectorTesting { public static void main(String[] args) { Vecto ...

  4. 内存对齐-C语言struct内存占用问题

    转1个写的比较全面的. http://hubingforever.blog.163.com/blog/static/17104057920122256134681/ 本文编辑整理自:http://hi ...

  5. ubuntu 13.10 64bit装BeyondCompare

    1. Beyond Compare官网下载amd-64位的,安装失败,依赖于ia32-libs,但是这个文件已经不在源里了: 2. 官网下载tar.gz源码包,解压安装失败: 3. 直接装32位的,可 ...

  6. 前台将勾选的多个属性放到一个value里面,是一个字符串,传到后台

    jq function changeStreet(a){ var valk=$(a).html(); $(a).parents(".select_box").children(&q ...

  7. LAMP环境 源码包安装

    linux的学习很早就开始了,大学的时候的时候有有学过unix,后来每年都有去看看linux,因为在小城市的缘故,很少会实际工作中用到,基本都是智慧云之类的,同事也说,你学起来也用不上,IT生态不好, ...

  8. TCL语言笔记:TCL中的数学函数

    一.TCL数学函数列表 函数名 说明 举例 abs(arg) 取绝对值 set a –10  ; #a=-10 set a [expr abs($a)]; # a=10 acos(arg) 反余弦 s ...

  9. Scanner演示

    import java.util.Scanner;                      /** *Scanner演示 */ public class ScannerDemo{ public st ...

  10. IO多路复用的几种实现机制的分析

    http://blog.csdn.net/zhang_shuai_2011/article/details/7675797 select,poll,epoll都是IO多路复用的机制.所谓I/O多路复用 ...