以前在做頁(yè)面顯示列表時(shí)候,要做一組數(shù)據(jù)隔行變色,當(dāng)時(shí)不知道,竟然用來(lái)了好多js腳本判斷,寫(xiě)了許多像下面的例子。
Html代碼
<table>
<%int c =0;%>
//循環(huán)取列表
<%
if (c % 2 == 0)
{
className = "一種顏色";
} else
{
className = "另外一種顏色";
}
c++;
%>
<tr lcass="className">
<td></td>
</tr>
//循環(huán)結(jié)束
</table>
后來(lái)直接用css控制:
.Pop_TR{
background-color:expression(this.rowIndex%2==0 ? "一種顏色":"另一種顏色");
cursor:hand;
}
這樣,想展示上面的樣式,只需要這樣寫(xiě):
Html代碼
<table>
//循環(huán)取列表
<tr lcass="Pop_TR">
<td></td>
</tr>
//循環(huán)結(jié)束
</table>
css版只適用于低版本的IE,expression會(huì)死人的,如果頁(yè)面很復(fù)雜。還不如前面的切換2個(gè)class的簡(jiǎn)單方法可靠。
在高級(jí)瀏覽器中可以考慮使用css selector(流行的js庫(kù)基本都實(shí)現(xiàn)了一套):
tr:nth-child(2n+1) /* 奇數(shù)行 */
tr:nth-child(odd) /* 奇數(shù)行 */
tr:nth-child(2n+0) /* 偶數(shù)行 */
tr:nth-child(even) /* 偶數(shù)行 */
Jquery版:
JQuery的話也很簡(jiǎn)單
1.
通過(guò)定義倆個(gè)class來(lái)實(shí)現(xiàn)
$("tr:even").addClass("even-row");
$("tr:odd").addClass("odd-row");
2.
或者一行代碼
$("tr").each(function(i){this.style.backgroundColor['#ccc','#fff'][i%2]})
table控制:
做個(gè)table奇偶行區(qū)別顯示的css類就好了,這東西不復(fù)雜的
<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>