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 () ...
随机推荐
- JsRender系列demo(4)-if else
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- django如何用orm增加manytomany关系字段(自定义表名)
不自定义表名的,网上有现成的,但如果自定义之后,则要变通一下了. app_insert = App.objects.get(name=app_name) site_insert = Site.obje ...
- DJANGO的requirements的运用
这里记录一下我现在项目的requirements.pip文件,安装命令为: pip install -r requirements.pip 这样一来,所有依赖,全部搞定. Django== djang ...
- QAQ数论模板笔记√
#include <cstdio> using namespace std; long long gcd(long long a, long long b) { // (a, b) ret ...
- [topcoder]PackingBallsDiv2
http://community.topcoder.com/stat?c=problem_statement&pm=12995 简单题 class PackingBallsDiv2 { pub ...
- nginx/apache/php隐藏http头部版本信息的实现方法
有时候我们需要隐藏我们的服务器版本信息,防止有心人士的研究,更安全,这里介绍下在nginx/apache/php中如何隐藏http头部版本信息的方法. nginx隐藏头部版本信息方法 编辑nginx. ...
- Scanner scanner=new Scanner(System.in)
import java.util.Scanner;public class inputoutar{ public static void main(String[] args) throws ...
- FireMonkey支持的机型
酷派5890(android 4.1.2) 从截图上看,正常.不知道为啥说不行.海信 T96(android 4.0.3) CPU 不支持 NEON.没辙.摩托罗拉XT885(android 4.0. ...
- Yii2 的问题解决方案
yii2 Class 'app\controllers\AccessControl' not found 一般是命名空间问题, 写成\yii\filters\AccessControl::classN ...
- IP地址字符串与BigInteger的转换
/** * Copyright (c) 2010, 新浪网支付中心 * All rights reserved. * * Java IP地址字符串与BigInteger的转换, * ...