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 () ...
随机推荐
- uva 757
贪心 优先队列 #include <cstdio> #include <cstdlib> #include <cmath> #include <map> ...
- linux源码阅读笔记 fork函数
在阅读源码的过程中,发现找不到fork函数的定义.后来在linux/init/main.c中找到了这样一条语句 static inline _syscall0(int,fork) 原来这里就是fork ...
- 终于明白公测的beta 源自何处了
A very early version of a software product that may not contain all of the features that are planned ...
- aChartEngine图表显示
android的数据报表显示 从图中,我们可以看出,绘制一个图表我们其实,我们只需要理解三个概念 1,ChartFactory ,传入XYMutilpleSeriesRenderer,XYMutilp ...
- Linux 按行分割文件(转载)
将一个大文件分成若干个小文件方法 例如将一个BLM.txt文件分成前缀为 BLM_ 的1000个小文件,后缀为系数形式,且后缀为4位数字形式 先利用 wc -l BLM.txt 读出 BL ...
- 【转载】SSH整合使用步骤
SSH整合使用步骤 由于刚开始学习SSH,其中的配置比较多,为了下次能够快速的进行配置,将SSH整合的过程记录下来,以便下次查阅. 软件环境:MyEclipse 9.0.Struts2.2.Sprin ...
- lintcode: 中序遍历和后序遍历树构造二叉树
题目 中序遍历和后序遍历树构造二叉树 根据中序遍历和后序遍历树构造二叉树 样例 给出树的中序遍历: [1,2,3] 和后序遍历: [1,3,2] 返回如下的树: 2 / \ 1 3 注意 你可 ...
- Project Euler 84:Monopoly odds 大富翁几率
Monopoly odds In the game, Monopoly, the standard board is set up in the following way: ...
- lintcode:两个数的和
题目 两数之和 给一个整数数组,找到两个数使得他们的和等于一个给定的数target. 你需要实现的函数twoSum需要返回这两个数的下标, 并且第一个下标小于第二个下标.注意这里下标的范围是1到n,不 ...
- GuessNum
import java.util.Scanner;import java.util.Random;/***猜数字,使用随机一个0-100的数字,然后用户猜,猜中了就提示猜中了,*否则提示猜大了还是猜小 ...