实现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，有更好的方法请评论补充，谢谢~

时间： 2024-10-20 16:50:59

实现table、列表隔行换色的相关文章

jQuery实现的table表格隔行换色代码实例

jQuery实现的table表格隔行换色代码实例:下面是一段代码实例,能够实现隔行变色的效果,这是网站人性化措施之一,在实际应用中的使用非常广泛.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

DTcms列表隔行换色；loop自带行号

<%loop cdr2 bcategoryList%> <%if(cdr2__loop__id==1)%> <a class="no-bg" href="<%linkurl("goods_list",{cdr2[id]})%>">{cdr2[title]}</a> <%else%> <a href="<%linkurl("goods_list&

w3c 说明 dd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1). 在这里,我们为奇数和偶数 p 元素指定两种不同的背景色: p:nth-child(odd){ background:#ff0000; }p:nth-child(even){ background:#0000ff; } 在一些比较多信息的列表里,需要不同颜色的横背景来较容易分辨信息, 可以使用nth-child()选择器来进行交换色;

jQuery实现table隔行换色和鼠标经过变色

一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定: $("table tr:nth-child(odd)").css("background-color","#eeeeee

08-JS中table隔行换色

JS中table隔行换色 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <table id="tab1" border="" cellspacing="" cellpaddi

Atitit.隔行换色  变色 css3 结构性伪类选择器

Atitit.隔行换色变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读原理就是利用结构伪类选择器 .list_div tr:nth-of-type(odd){background:#fff;} /* 奇数行 */ /*-------------------------------*/ .list_div tr:nth-of-type(even){ background:

在PHP当中制作隔行换色的效果以及制作上下翻页的效果！

首先说明隔行换色的效果,需要用到tr:nth_child(odd);或者括号里的值是even,odd是从第一行开始隔一行,even是从第二行开始: 具体代码如下图案所示: 1 <style> 2 /*tr:nth-child(even){*/ 3 /*background: #cad9ea;*/ 4 /*}*/ 5 </style> 在数据库当中查询第几条开始和我们需要显示的数据只要几条:我们可以用到limin语句,具体代码如下: 1 $sql = "select * f

隔行换色

这是在直接在jsp页面中使用java代码<% //每页显示的新闻列表 List<News> newsList=newsService.getPageNewsList(pageIndex,pageSize); int i=0; for(News news:newsList){ i++; } %> <tr<%if(i%2!=0){%>class="admin-list-td-h2<%}%>"> <td><%=ne

三种php表格隔行换色

第一种for{}eles{}: <?php echo "<table width='80%' border = 1 cellpadding=5 cellspacing=0>"; for ($i = 1; $i <= 5; $i++){ if($i % 2 == 0){ echo '<tr align="center" bgcolor="red">'; }else{ echo '<tr align=&quo