【胃检查有几种方法】用几种方法实现table隔行改变颜色风格的技术

2008-09-16 手机技术 阅读:

以前在做页面显示列表时候,要做一组数据隔行变色,当时不知道,竟然用来了好多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""/>">
<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>

【胃检查有几种方法】用几种方法实现table隔行改变颜色风格的技术

http://m.quanqiunao.cn/yingjianxiangguan/6199/

推荐访问:加微信有几种方法 牙齿修复的几种方法

手机技术推荐文章

推荐内容

上一篇:gmail_GMail web app有了优先级收件箱功能 下一篇:【中科院深圳先进技术研究院招生】中科院深圳先进技术研究院2011硕士生调剂申请表