表格隔行换色

实现列表中隔行显示背景颜色

Html代码

<div class="searchListDetail">
  <ul class="bold">
    <li>姓名</li><li>公司</li><li>职位</li><li>标签</li><li>性别</li><li>工作年限</li>
  </ul>
  <ul>
    <li><a href="#">杜海君</a></li>
   <li><a href="#">赛诺菲民生健康药业有限公司</a></li>
    <li><a href="#">研究员</a></li>
    <li><span class="ListTarget">AC</span></li>
    <li></li>
    <li>5年</li>
  </ul>
  <ul>
    <li><a href="#">桑以文</a></li>
    <li><a href="#">上海仁画信息科技发展有限公司</a></li>
    <li><a href="">程序员</a></li>
    <li><span class="ListTarget">高级软件工程师</span><span class="ListTarget">高级软件工程师</span></li>
    <li></li>
    <li>5年</li>
  </ul>
  <ul>
    <li><a href="#">杜海君</a></li>
   <li><a href="#">赛诺菲民生健康药业有限公司</a></li>
    <li><a href="#">研究员</a></li>
    <li><span class="ListTarget">AC</span></li>
    <li></li>
    <li>5年</li>
  </ul>
  <ul>
    <li><a href="#">桑以文</a></li>
    <li><a href="#">上海仁画信息科技发展有限公司</a></li>
    <li><a href="">程序员</a></li>
    <li><span class="ListTarget">高级软件工程师</span><span class="ListTarget">高级软件工程师</span></li>
    <li></li>
    <li>5年</li>
  </ul>
  <ul>
    <li><a href="#">杜海君</a></li>
   <li><a href="#">赛诺菲民生健康药业有限公司</a></li>
    <li><a href="#">研究员</a></li>
    <li><span class="ListTarget">AC</span></li>
    <li></li>
    <li>5年</li>
  </ul>
  <ul>
    <li><a href="#">桑以文</a></li>
    <li><a href="#">上海仁画信息科技发展有限公司</a></li>
    <li><a href="">程序员</a></li>
    <li><span class="ListTarget">高级软件工程师</span><span class="ListTarget">高级软件工程师</span></li>
    <li></li>
    <li>5年</li>
  </ul>
</div>

jQuery实现

$(document).ready(function () {
  $(".searchListDetail ul:odd").css("background-color","rgb(242,243,244)");
}

css实现

.searchListDetail ul:nth-of-type(even) {
  background-color: rgb(242,243,244);
}

css3隔行换色扩展阅读

http://www.51xuediannao.com/qd63/index.php/page-3-35-1.html

结构伪选择器

顾名思议,结构伪类选择器是利用DOM实现元素过滤,也就是说它是通过文档结构之间的相互关系来进行匹配,从而减少文档内对class和平ID的定义.

选择器

说明

E:root

匹配E所在文档的根元素.在html文档中,根元素就是html 标签.

E:nth-child(n)

找出E元素,且它是你北朝鲜绵第n个子元素.n可以是数字(1,2,3),关键字(odd,even),公式(2n,2n+3),数字是从1开始的,不是0.如:

tr:nth-child(3)匹配所有表格里第3行的tr

tr:nth-child(2n+1)匹配所有表格的奇数行

tr:nth-child(2n)匹配所有的偶数行

tr:nth-child(odd)匹配所有的奇数行

tr:nth-child(even)匹配所有的偶数行

E:nth-last-child(n)

选择E元素,且它是父元素的倒数第n个子元素

E:nth-of-type(n)

选择E元素,且它是父元素所有子元素中类型为E的子元素集合中的第n个,n可以是数字(1,2,3),关键字(odd,even),公式(2n,2n+3),数字是从1开始的,不是0.如p:nth-of-type(2)匹配出,<div><h1></h1><p></p><p></p></div>中第二个p元素

E:nth-last-of-type(n)

选择E元素,且它是父元素的倒数第n个子节点

E:last-child

找出E元素,且它是父元素中的最后一个字节点

E:first-of-tpe

找出E元素,且它是父元素中是第一个该类型的元素,如p:first-of-type匹配<div><p></p><p></p>中的第一个p元素.

E:last-of-type

找出E元素,且它是父元素中的最后一个该类型的元素.如:p:last-of-type匹配,<div><p></p><p></p></div>中的最后一个p元素,它同E:nth-last-of-tpe(1)意义相同

E:only-child

找出父元素中只包括一个的子元素,且该元素是E

E:only-of-type

选择其父元素只包含一个同类型的子元素,且该子元素匹配E.如p:only-of-type匹配<div><p></p></div>中的p,因为div中只包括一个p元素

E:empty

匹配E元素,且该元素不包含子节点,注意,文字也属于节点

浏览器兼容性

IE

Firefox

Opera

Safari

Chrome

IE9及以上

3.5及以上

9.6及以上

3.1及以上

1.0及以上

更多相关文章
  • 在birt报表的开发过程中,经常会用到隔行换色的功能恶搞,具体实现如下:1.鼠标旋停在表格上,选择Row Detail一行:2.选择script标签页,打开birt的脚本编辑窗口:3.从下拉列表中选择OnCreate,在下面加入Javascript脚本如下:if(row.__rownum % 2 = ...
  • ListView数据项隔行换色控制实现详解
        看到有朋友在群里问过ListView项达到一定数量时加不同色选项的功能,有时间就学习了下ListView隔行换色的效果,大体效果实现出来了,吼吼,写博客里面,跟大家学习交流,一样的,先贴效果,再上代码,效果图如下:一:五行换色效果 二:快速拖动块显示效果三:循环从0开始时的效果图三 这个地方 ...
  • SSRS2012聚合函数--隔行换色示例
    SSRS 2012 聚合函数 -- 隔行换色示例有时我们希望报表能够显示出数据笔数的流水序号,如果要使用T-SQL查询来做出这种效果,通常必须使用RANK函数以自动产生编号,在此将介绍如何使用SSRS的RowNumber(RunningValue也可以做到)聚合函数来做出自动编号,以及将数据单元格根 ...
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http: ...
  • 1.给表单加样式,可以用css.php与js.js这三种,其中最好用php与js,现在很推广用这种. css3样式隔行换色(table中) tr:nth-child(even){ background: #cad9ea; }  php与js隔行换色(table中) function changeCo ...
  • )%> <a class="no-bg" href="<%linkurl("goods_list",{cdr2[id]})%>">{cdr2[title]}</a> <%else%> & ...
  • 隔行变色表格隔行变色+LI浮动隔行变色
    第一篇文章哈 随便写写表格隔行变色,一个很普通的js效果... 但是我非常不喜欢用table,一是代码累赘,再是...我通常用li写信息列表.例如相册列表,通常是用浮动排版,或者block-inline...一行有好几个li元素这时要隔行变色的话...首先假如总共有7个li,一行有3个li,那最后一 ...
  • 打造自由换色的png图片类         想像一下,有一个游戏,里面有很多种颜色的人,图片完全一样,只是人物衣服的颜色不同.比如街霸中真的红色的Ken和假的青色的Ken,它们的图形一模一样,只是颜色换掉了.这时你会怎么做呢?画好多张图片?拜托,都21世纪了,别做这种没有一点技术含量的工作好不好?聪 ...
一周排行
  • 负载均衡技术中的真集群和伪集群
      集群这个词在网络中用的非常广泛,很多场景中所说的集群实际上是和High Availab ...
  • 吞吐量与网络流量对应关系剖析
    假设现在我们测试switch1的流量和吞吐量(为了简化,假设switch1只有两个端口), ...
  •  一.postfix邮件服务的安装Red Hat Enterprise Linux 提供了sendmail和postfix两种STMP邮件服务软件,让用户可以随意地选择其中一种!不过,默认情况下安装程序已将sendm ...
  • 首先现在如下rpm包,然后安装对应的rpm包centos5 32位epel源下载地址: www.lishiming.net/data/attachment/forum/epel-release-_32.noar ...
  • WCFAjaxJson的应用
    WCF Ajax 的应用网上实际上有很多, 如: Ajax与Wcf交互-JSON jQue ...
  •   在C++中,库的地位是非常高的.C++之父 Bjarne Stroustrup先生多次表示了设计库来扩充功能要好过设计更多的语法的言论.现实中,C++的库门类繁多,解决的问题也是极其广泛,库从轻量级到重量级的都有 ...
  • 最近开始使用WebAPI,上手很容易,然后有些疑惑 1.WebAPI默认返回什么数据类型,json还是xml?2.怎么修改WebAPI的返回数据类型,我用IE浏览器请求返回的数据都是JSON格式的,用Firefox和 ...
  •          美国兰德公司对中国人的评价(值得思考)  美国兰德公司是一家著名的非盈利的研究机构,为美国官方提供"客观的分析和有效的解决方案".最近,他们公布了一份对中国现状分析报告,即有肯定 ...
  • 提高性能:用RequireJS优化WijmoWeb页面
    上周Wijmo 2014 V2版本刚刚发布(下载地址),  有网友下载后发现仅仅使用了40 ...
  • 程序员视角的餐饮行业
    实习时间:2016/02/16 ——2016/02/23 实习地点:广西省贺州市富川瑶族自 ...