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

相信很多时候,我们前端人员,经常会用到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. linux源代码阅读笔记 find_entry分析

    78 static struct buffer_head * find_entry(struct m_inode * dir, 79 const char * name, int namelen, s ...

  2. PKU 1458 Common Subsequence(最长公共子序列,dp,简单)

    题目 同:ZJU 1733,HDU 1159 #include <stdio.h> #include <string.h> #include <algorithm> ...

  3. POJ3250Bad Hair Day

    http://poj.org/problem?id=3250 题意 :  n个牛排成一列向右看,牛 i 能看到牛 j 的头顶,当且仅当牛 j 在牛 i 的右边并且牛 i 与牛 j 之间的所有牛均比牛 ...

  4. POJ 2253 Frogger(floyd)

    http://poj.org/problem?id=2253 题意 : 题目是说,有这样一只青蛙Freddy,他在一块石头上,他呢注意到青蛙Fiona在另一块石头上,想去拜访,但是两块石头太远了,所以 ...

  5. windows下eclipse远程连接hadoop错误“Exception in thread"main"java.io.IOException: Call to Master.Hadoop/172.20.145.22:9000 failed ”

    在VMware虚拟机下搭建了hadoop集群,ubuntu-12.04,一台master,三台slave.hadoop-0.20.2版本.在 master机器上利用eclipse-3.3连接hadoo ...

  6. Linux Versus Windows, Ubuntu/Mint V XP/Vista/7

    原文:http://petermoulding.com/linux_versus_windows_ubuntu_mint_v_xp_vista_7 Linux Versus Windows, Ubun ...

  7. 李洪强漫谈iOS开发[C语言-039]-剪刀石头布

     李洪强漫谈iOS开发[C语言-039]-剪刀石头布

  8. Apache与Tomcat整合

    Apache与Tomcat整合   一 Apache与Tomcat比较联系 apache支持静态页,tomcat支持动态的,比如servlet等. 一般使用apache+tomcat的话,apache ...

  9. mysql建表时拆分出常用字段和不常用字段

    一对一 一张表的一条记录一定只能与另外一张表的一条记录进行对应,反之亦然. 学生表:姓名,性别,年龄,身高,体重,籍贯,家庭住址,紧急联系人 其中姓名.性别.年龄.身高,体重属于常用数据,但是籍贯.住 ...

  10. uCos的多任务实现

    uCos的多任务实现 作为操作系统(OS),最基本的一项服务就是提供多线程,在实时操作系统uCos里,多线程被称为多任务(Task).多任务并不是CPU能真正同时运行多个程序,实际是靠CPU在多个任务 ...