• 微软原版系统

  • 一键重装系统

  • 纯净系统

  • 在线技术客服

魔法猪系统重装大师 一键在线制作启动 U 盘 PE 系统 用一键重装的魔法拯救失去灵魂的系统
当前位置:首页 > 教程 > 电脑教程

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

时间:2015年04月02日 15:37:28    来源:魔法猪系统重装大师官网    人气:18931

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


<%int c =0;%>

//循环取列表

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





//循环结束



后来直接用css控制:
.Pop_TR{
background-color:expression(this.rowIndex%2==0 ? "一种颜色":"另一种颜色");
cursor:hand;
}
这样,想展示上面的样式,只需要这样写:
Html代码

//循环取列表





//循环结束


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类就好了,这东西不复杂的



">







用,几种,方法,实现,table,隔行,改,变颜色,风格,
栏目:电脑教程 阅读:1000 2023/12/27
Win7教程 更多>>
U盘教程 更多>>
Win10教程 更多>>
魔法猪学院 更多>>

Copyright © 2015-2023 魔法猪 魔法猪系统重装大师

本站发布的系统仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持购买微软正版软件。

在线客服 查看微信 返回顶部