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
table中嵌套table,如何用jquery来控制奇偶行颜色的更多相关文章
- iview之——table中嵌套input、select等
使用iview在table中嵌入button是比较常见的需求,但是在table中嵌入input或者select你是否考虑过呢?本文用实例介绍input和select在table中的嵌套. 理解tabl ...
- html table奇偶行颜色设置 (CSS选择器)
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型.n 可以是数字.关键词或公式. 下面的例子, 设置表格的奇偶行背景颜色不同:单独设置表格的第1列背景颜色不同. & ...
- 如何修改antd中表格的表头样式和奇偶行颜色交替
在做antd表格时通常会用到table组件,但是table的表头时给定的,那么怎么修改表头的颜色呢? 这里用的时less的写法,在全局环境中写,所有的table表头都会变成自己定义的颜色 定义好表头的 ...
- Java如何使用while和for嵌套循环控制输出数据,使数据奇偶行不同
/* 题目1 使用Eclipse编写控制台应用程, 使用while循环在控制台打印10行10列的如下图形 □ □ □ □ □ □ □ □ □ □ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ □ □ □ □ ...
- td中嵌套table,让table完全填充父元素td
<table width="100% " cellspacing=0 cellpadding=0 border=1 > <tr> <td style= ...
- Lua中的table构造式(table constructor)
最简单的构造式就是一个空构造式{},用于创建一个空table. 构造式还可以用于初始化数组.例如,以下语句:days = {"Sunday", "Monday" ...
- Java&Selenium处理页面Table以及Table中随机位置的数据
一.摘要 前一段时间公司小伙伴刚刚接触自动化,遇到的一个问题,页面新创建的数据保存后,出现在table中的某个位置,并不一定是第一行还是第几行,这种情况下如何去操控它 本篇博文将介绍处理这个问题的一种 ...
- Bootstrap table插件 被选中的行颜色改变
参考:https://www.jianshu.com/p/1bb4c37ef636 在 bootstrap-table.min.css 中修改源码 //选中行颜色 .fixed-table-conta ...
- Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...
随机推荐
- iOS 通过代码关闭应用程序
//-------------------------------- 退出程序 -----------------------------------------// - (void)exitAppl ...
- Follow Path -》 Unity3d通用脚本
PathDefinition.cs using UnityEngine; using System.Collections; using System.Collections.Generic; usi ...
- 对于python的内存管理的好文章
http://www.cnblogs.com/vamei/p/3232088.html 包含了一个绘制关系图的包
- D&F学数据结构系列——红黑树
红黑树 定义:一棵二叉查找树如果满足下面的红黑性质,则为一棵红黑树: 1)每个结点不是红的就是黑的 2)根结点是黑的 3)每个叶结点是黑的 4)如果一个结点是红的,它的两个儿子都是黑的(即不可能有两个 ...
- 提交jar作业到spark上运行
1.引入spark包:spark-assembly-1.4.0-hadoop2.6.0,在spark的lib目录下 File-->project structure 2.用IDEA建立一个sca ...
- SDUT1586 计算组合数(组合数)
这个题数据量小,不容易超时. #include<stdio.h> long long fac(int n) { ; ; i <= n ; i++) { m = i*m; } retu ...
- Test Markdown Editor
Last night, I just saw a cute blogger's homepage. Then I want to write something. But anyway, I use ...
- Highcharts中初始化最大值与最小值的柱状图
<!doctype html> <html lang="en"> <head> <script type="text/javas ...
- AndroidManifest.xml介绍一
下面是AndroidManifest.xml的简单介绍,直接上图! 一.manifest结点的属性介绍 二.application结点属性介绍 三.activity.intent-filter.use ...
- SDK 与MFC
SDK 就是Software Development Kit 软件开发包MFC 就是Microsoft Foundation Classes 微软函数类库.是以C++类的形式封装了Windows的AP ...