表格隔行换色

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

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世纪了,别做这种没有一点技术含量的工作好不好?聪 ...
一周排行
  • 在对数据库进行备份的时候出现这样的报错,如下mysqldump: Couldn't execute 'SHOW FUNCTION STATUS WHERE Db = 'abc'': Cannot load from ...
  • 电商为何要死磕线下
    电商之间的战火,如今早已不局限于线上电商平台,而是蔓延至更接地气.辐射范围更广的线下市场. ...
  • 批处理设置JDK环境 @echo off echo ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓    title                                          ...
  • Radware负载均衡项目配置实战解析之五-设备维护与管理
    接上一小节内容,这一节主要介绍RADWARE负载均衡实战项目中的设备维护与管理问题.具体内 ...
  • 50070无法连接处理方法是因为core-site.xml的文件配置<property> <name>hadoop.tmp.dir</name> <value>/usr ...
  • 在全国教育工作会中,胡锦涛主席在讲话中强调,教育是民族振兴.社会进步的基石,是提高国民素质.促进人的全面发展的根本途径,寄托着亿万家庭对美好生活的期盼.强国必先强教.胡锦涛主席就推动教育事业科学发展提出5项要求,即优 ...
  • 前几天写了"lsass之惑"那篇文章的时候,最后有一个步骤建议通过组策略编辑器关掉自动运行. 实际上,这几天我发现了通过组策略编辑器关闭自动播放,其实只是禁止了光盘.U盘插入电脑时的自动播放! 真 ...
  • MySql简易配置
    选择standard configuration ,然后next Service Name ...
  • #!/bin/bashCD=`df -l |awk'NR==3 {print $4}'|awk 'BEGIN {FIELDWIDTHS="2 1"}''{print $1}'`if [ $CD - ...
  • 今天我们来说说Qt容器类中的关联存储容器.所谓关联存储容器,就是容器中存储的一般是二元组,而不是单个的对象.二元组一般表述为<Key-Value>,也就是“键-值对”. 首先,我们看看数组的概念.数组可以 ...