Question

用几种方法实现table隔行改变颜色风格的技术

Answer 1

以前在做页面显示列表时候，要做一组数据隔行变色，当时不知道，竟然用来了好多js脚本判断，写了许多像下面的例子。 Html代码<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;}这样，想展示上面的样式，只需要这样写：Html代码<table>//循环取列表 <tr lcass="Pop_TR"><td></td></tr>//循环结束</table>css版只适用于低版本的IE，expression会死人的，如果页面很复杂。还不如前面的切换2个class的简单方法可靠。 在高级浏览器中可以考虑使用css selector（流行的js库基本都实现了一套）: tr:nth-child(2n+1) /* 奇数行 */ tr:nth-child(odd) /* 奇数行 */ tr:nth-child(2n+0) /* 偶数行 */ tr:nth-child(even) /* 偶数行 */Jquery版：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]}) table控制： 做个table奇偶行区别显示的css类就好了，这东西不复杂的<tbody><s:iterator id="ip" status="status" value="ipUseList"> <tr class="<s:property value="#status.odd?'odd':'even'"/>">