博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
table中嵌套table,如何用jquery来控制奇偶行颜色
阅读量:6570 次
发布时间:2019-06-24

本文共 1038 字,大约阅读时间需要 3 分钟。

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

      相信很多时候,我们前端人员,经常会用到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了。

  源码链接:

转载于:https://www.cnblogs.com/wanliyuan/p/3643639.html

你可能感兴趣的文章
Android bitmap绘制文字自动换行
查看>>
express下使用ES6
查看>>
django中的filter和get的区别 (MultipleObjectsReturned: get() returned more than one Publisher --)(DoesN...
查看>>
javascript模板库jsrender加载并缓存外部模板文件
查看>>
JavaWeb应用项目部署到云ubuntu
查看>>
【鉴别】日版iPhone如何通过IMEI查询运营商
查看>>
mysql双主+keepalived【转】
查看>>
HDU 3037 Saving Beans [Lucas定理]
查看>>
处理程序“ExtensionlessUrlHandler-Integrated-4.0”在其模块列表中有一个错误模块“ManagedPipelineHandler”...
查看>>
HTML5的新的结构元素介绍
查看>>
Atitit 切入一个领域的方法总结 attilax这里,机器学习为例子
查看>>
设备树驱动API【原创】
查看>>
常用设计模式——创建型
查看>>
Windows 环境下分布式跨域Session共享(转)
查看>>
GIT入门笔记(2)- 典型的工作模式
查看>>
使用HTML5 WebStorage API构建与.NET对应的会话机制
查看>>
MySQL查看修改存储引擎总结
查看>>
[React Router v4] Use the React Router v4 Link Component for Navigation Between Routes
查看>>
c++输入输出
查看>>
eclipse启动优化文章集合
查看>>