一个用CSS实现隔行变色的技术

以前在做页面显示列表时候，要做一组数据隔行变色，当时不知道，竟然用来了好多java脚本判断，写了许多像下面的例子。

<table>

<%int c =0;%>

//循环取列表

<%
       if (c % 2 == 0) 
       {
        className = "一种颜色";
       } else 
       {
           className = "另外一种颜色";
       }
       c++;
      %>
      <tr lcass="className">
       <td></td>

     </tr>

//循环结束

</table>

 

某一天才发现有如下的方法，可以直接在css中写：

.Pop_TR{
 background-color:expression(this.rowIndex%2==0 ? "一种颜色":"另一种颜色");
 cursor:hand;
}

 这样，想展示上面的样式，只需要这样写：

<table>
//循环取列表
      <tr lcass="Pop_TR">
       <td></td>

     </tr>

//循环结束
</table>

 

这样一来，的确减少了不少代码，jsp中也不需要写那些丑陋的java脚本了。css技术，还真要下一番功夫去研究。

 

评论

17 楼 lixin3811 2010-02-04  

针对楼主认为网速慢而需要在Java生成html页面时即生成对应class字符串，其实大可不必；如果页面未加载完，渲染也就未开始，隔行变色的效果也不会出现。

16 楼 hesy_007 2010-02-04  

不建议在css中使用表达式！！

15 楼 supercrsky 2010-02-04  

expression
这个在复杂页面，ie6下很容易崩溃的

14 楼 hlylove 2010-02-04  

这种我都在后台处理好

13 楼 liupesnap 2010-02-04  

css的expression 就只有在页面中图片超出指定尺寸控制时用过 感觉不是很灵活

12 楼 刃之舞 2010-02-03  

wucc1986 写道

bluemeteor 写道

JQuery的话也很简单

1.
通过定义俩个class来实现
$("tr:even").addClass("even-row");
$("tr:odd").addClass("odd-row");

2.
或者一行代码
$("tr").each(function(i){this.style.backgroundColor['#ccc','#fff'][i%2]})    

这样做也不好的，这个是需要页面onload之后，才会去加样式。如果网速慢的话，开始页面是没样式的。。卡了一会才加上样式。之前用这种方式实现，后面还是改成java判断添加class。

我就搞不懂了，都什么年代了，还有人喜欢在jsp里加上恶心的不协调的java代码，不知道有el表达式这个东西的吗？不知道使用框架扩展标签或者自定义标签的吗？

11 楼 wucc1986 2010-02-02  

bluemeteor 写道

JQuery的话也很简单

1.
通过定义俩个class来实现
$("tr:even").addClass("even-row");
$("tr:odd").addClass("odd-row");

2.
或者一行代码
$("tr").each(function(i){this.style.backgroundColor['#ccc','#fff'][i%2]})    

这样做也不好的，这个是需要页面onload之后，才会去加样式。如果网速慢的话，开始页面是没样式的。。卡了一会才加上样式。之前用这种方式实现，后面还是改成java判断添加class。

10 楼 amonlei 2010-02-02  

楼主第一段代码好恶

9 楼 刃之舞 2010-02-02  

做个table奇偶行区别显示的css类就好了，这东西不复杂的

<tbody>
				<s:iterator id="ip" status="status" value="ipUseList">
					<tr class="<s:property value="#status.odd?'odd':'even'"/>">
						<td><s:property value="#ip.subnet"/></td>
						<td><s:property value="#ip.netmask"/></td>
						<td><s:property value="#ip.city_name"/></td>
						<td><s:property value="#ip.country"/></td>
						<td><s:property value="#ip.subnetcomment"/></td>
					</tr>
				</s:iterator>
			</tbody>		

8 楼 gwwnha 2010-02-02  

背景图repeat-x repeat-y

7 楼 gwwnha 2010-02-02  

不需要用jquery,用1张背景图就搞定。

6 楼 pekkle 2010-02-02  

用ｊｑｕｅｒｙ就不好了

5 楼 cheng888qi 2010-02-02  

xyztony1985 写道

首先是IE Only；
其次是效率很低。

结论是最好不用。

正解！

4 楼 bluemeteor 2010-01-31  

JQuery的话也很简单

1.
通过定义俩个class来实现
$("tr:even").addClass("even-row");
$("tr:odd").addClass("odd-row");

2.
或者一行代码
$("tr").each(function(i){this.style.backgroundColor['#ccc','#fff'][i%2]})    

3 楼 鹤惊昆仑 2010-01-31  

expression会死人的，如果页面很复杂。还不如前面的切换2个class的简单方法可靠。

在高级浏览器中可以考虑使用css selector（流行的js库基本都实现了一套）:
tr:nth-child(2n+1) /* 奇数行 */
tr:nth-child(odd)  /* 奇数行 */

tr:nth-child(2n+0) /* 偶数行 */
tr:nth-child(even) /* 偶数行 */

2 楼 xyztony1985 2010-01-31  

首先是IE Only；
其次是效率很低。

结论是最好不用。

1 楼 02221021 2010-01-30  

firefox咋办？