实现table、列表隔行换色

标签：

为了增强用户体验，快速识别行内容，一般都会在一些列表或者表格设置隔行换色~

本人了解到的有两种常用的方法~

1，利用CSS进行隔行换色

tr{ background: #E0F0FA;}
tr:nth-child(2n){ background: white;} //规定属于其父元素的第2n(第偶数个)个子元素的每个 tr 的背景色
tr{ background-color: expression((this.sectionRowIndex % 2 == 0) ?   "#E0F0FA" : "white" );}

2，利用JQuery实现隔行换色

$(".table tr:not(:has(th)):odd").css({"background-color":"#F7F8FA"});

另：如果想对鼠标点击添加类，然后进行颜色高亮的话，你会发现，隔行失效（高亮背景色无法显示)~这个时候设置颜色高亮的那个类的CSS优先级就可以了，利用!important~

.selected{
  background-color:  #A3CCE8 !important;
}

Duang一下就可以了~哈哈哈

PS，有更好的方法请评论补充，谢谢~

实现table、列表隔行换色

标签：

原文地址：http://my.oschina.net/u/2312977/blog/402265