表格中的一条数据很长为了不要看错上下两行,一般为使上下两行的数据背景颜色不一样来区别。在JSF中,如使用的是<t:dataTable>标签来显示数据。有属性rowClasses。对表格中行给予不同的css样式。如果css的样式名字是用逗号隔开的,会把不同的样式根据顺序给不同的行。如果样式少于行数,则样式会一直循环。如果样式多余行数,则多余的样式被忽略。
1、交替显示不同颜色
Style.css
.orders {
border: thin solid black;
}
.ordersHeader {
text-align: center;
font-style: italic;
color: Snow;
background: Teal;
}
.evenColumn {
height: 25px;
text-align: center;
background: MediumTurquoise;
}
.oddColumn {
text-align: center;
background: PowderBlue;
}
页面
<h:dataTable ... rowClasses="evenColumn,oddColumn" ...>
二、如果想让每两行换一种颜色
(我在text.css 用this.rowIndex%4>1 没成功)
<style type="text/css">
.td1 {
background: #e4edf9;
}
.td2 {
background: #e4edf9;
}
.td3 {
background: #FFFFFF
}
.td4 {
background: #FFFFFF;
}
</style>
属性设置
<t:dataTable ... rowClasses="td1,td2,td3,td4" ... >
3、onmouseover、onmouseout效果
text.css
.ChangeColor {
background-color:expression((this.rowIndex%2==0)?"#e4edf9":"#FFFFFF");
ryo:expression(οnmοuseοver=function(){this.style.backgroundColor='#b9d7f9'},
οnmοuseοut=function(){this.style.backgroundColor=(this.style.backgroundColor='#CCFFFF'?((this.rowIndex%2==0)?"#e4edf9":"#FFFFFF"):'#CCFFFF')},
οnclick=function(){this.style.backgroundColor='#CCFFFF'})
}
设置属性
<t:dataTable ... rowClasses="ChangeColor" ... >