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

用几种方法实现table隔行改变颜色风格的技术,第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'"/>"><td><s:property value="#ip.subnet"/></td><td><s:property value="#ip.netmask"/></td><td><s:property value="#ip.city_name"/></td>

你不能写成这样吗,把里边的table放在外层table的行里

<table >

<tr>

<table></table>

</tr>

<tr>

<table></table>

</tr>

<tr>

<table></table>

</tr>

</table>

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/7995330.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-12
下一篇 2023-04-12

发表评论

登录后才能评论

评论列表(0条)

保存