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 () ...
随机推荐
- Android开发--使用真机进行USB调试程序
在android小程序的开发过程中,使用eclipse中的虚拟机进行程序开发速度较慢,用真机开发可以显著提高调试的速度. 这里我用的操作系统是win7专业版,手机型号HM1S: 进行USB调试的主要步 ...
- **bootstrap常见常用样式总结
1.水平居中 用 .text-center 类
- JAVA WEB中如何让数据库连接对开发人员完全透明?
书上的技术,确实开了眼界. 列相关测试代码如下,慢慢体会开发的模式. PropsUtil package org.smart4j.chapter2.util; import java.io.FileN ...
- ActiveMQ使用教程
ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,尽管JMS规范出台已经是很久 ...
- tornado nginx supervisor
安装:sudo apt-get install python-tornado sudo apt-get install nginx sudo apt-get install supervisor 1. ...
- ASP.NET MVC 4 (一)路径映射
原文:ASP.NET MVC 4 (一)路径映射 正如ASP.NET MVC名字所揭示的一样,是以模型-视图-控制设计模式构建在ASP.NET基础之上的WEB应用程序,我们需要创建相应的程序类来协调处 ...
- Quartz 并发/单线程
Quartz 并发/单线程 Quartz定时任务默认都是并发执行的,不会等待上一次任务执行完毕,只要间隔时间到就会执行, 如果定时任执行太长,会长时间占用资源,导致其它任务堵塞.1.在Spring中这 ...
- win8系统 Reflect 破解
在win8系统中,从网上下载Reflect和注册机,按照教程操作,但是在生成应答字符串的时候,没有生成字符串,很纳闷. 尝试了好几个版本,最终是在win7系统中也按照流程操作一遍.重点是在生成应答字符 ...
- PCL—低层次视觉—点云滤波(初步处理)
点云滤波的概念 点云滤波是点云处理的基本步骤,也是进行 high level 三维图像处理之前必须要进行的预处理.其作用类似于信号处理中的滤波,但实现手段却和信号处理不一样.我认为原因有以下几个方面: ...
- Linux线程属性总结
线程属性标识符:pthread_attr_t 包含在 pthread.h 头文件中. //线程属性结构如下: typedef struct { int etachs ...