JSF---->表格设置行的颜色

表格中的一条数据很长为了不要看错上下两行，一般为使上下两行的数据背景颜色不一样来区别。在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"   ...   >

 

 

参考