文档章节

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

小强斋太
 小强斋太
发布于 2016/11/09 20:06
字数 287
阅读 6
收藏 0

表格中的一条数据很长为了不要看错上下两行,一般为使上下两行的数据背景颜色不一样来区别。在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(onmouseover=function(){this.style.backgroundColor='#b9d7f9'},
  onmouseout=function(){this.style.backgroundColor=(this.style.backgroundColor='#CCFFFF'?((this.rowIndex%2==0)?"#e4edf9":"#FFFFFF"):'#CCFFFF')},
  onclick=function(){this.style.backgroundColor='#CCFFFF'})
}

设置属性

<t:dataTable ...    rowClasses="ChangeColor"   ...   >

 

 

参考

 

本文转载自:http://www.cnblogs.com/xqzt/archive/2013/01/14/5637111.html

共有 人打赏支持
小强斋太
粉丝 0
博文 181
码字总数 0
作品 0
广州
私信 提问
HTML5全栈开发中表格的设计方法

  HTML全栈开发中的表格用 表示。一个表格可以分成很多行,用 表示;每行又可以分成很多单元格,用 表示。这三个Tag是创建表格最常用的Tag: 表格所用到的Tag:整个表格开始要用table;每一...

菜鸟哈哈哈
2016/06/12
262
0
ExtJS4.1.1 设置表格背景颜色 修改文本颜色 在表格中插入图片

由于ExtJS版本不断更新,各种渲染方式也随之有所改变,目前大部分书籍还是停留在3版本,对于ExtJS4.1.1版本的表格渲染,设置表格行背景颜色的方式如下: 首先,定义行的样式: 1.yellow-row...

南風
2014/08/22
0
0
Bootstrap学习2

1、表格 表格行的类:Bootstrap还为表格的行元素<tr>提供了五种不同的类名,每种类名控制了行的不同背景颜色 .active 表示当前活动的信息 .success 表示成功或者正确的行为 .info 表示中立的...

ricardohn
2016/03/28
64
0
1.5 Hello, world! 解剖 -JSF实战 -hxzon -jsf学习笔记

1.5 Hello, world! 解剖 -JSF实战 -hxzon -jsf学习笔记 既然已经对JSF能够解决什么问题有了初步理解,我们来开始开发一个简单的应用。本节假定你已熟悉Java Web应用和JSP(关于这些技术的信息...

hxzon
2009/03/05
0
0
15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客
2010/08/12
5.6K
1

没有更多内容

加载失败,请刷新页面

加载更多

大数据教程(7.4)HDFS的java客户端API(流处理方式)

博主上一篇博客分享了namenode和datanode的工作原理,本章节将继前面的HDFS的java客户端简单API后深度讲述HDFS流处理API。 场景:博主前面的文章介绍过HDFS上存的大文件会成不同的块存储在不...

em_aaron
昨天
2
0
聊聊storm的window trigger

序 本文主要研究一下storm的window trigger WindowTridentProcessor.prepare storm-core-1.2.2-sources.jar!/org/apache/storm/trident/windowing/WindowTridentProcessor.java public v......

go4it
昨天
6
0
CentOS 生产环境配置

初始配置 对于一般配置来说,不需要安装 epel-release 仓库,本文主要在于希望跟随 RHEL 的配置流程,紧跟红帽公司对于服务器的配置说明。 # yum update 安装 centos-release-scl # yum ins...

clin003
昨天
9
0
GPON网络故障处理手册

导读 为了方便广大网络工作者工作需要,特搜集以下GPON网络处理流程供大家学习参考。开始—初步定为故障—检查光纤状况—检查ONU状态--检查设备运行状态—检查设备数据配置—检查上层设备状态...

问题终结者
昨天
9
0
MariaDB、Apache安装

11月12日任务 11.6 MariaDB安装 11.7/11.8/11.9 Apache安装 1.MariaDB安装 cd /usr/local/src wget https://downloads.mariadb.com/MariaDB/mariadb-10.2.6/bintar-linux-glibc_214-x86_64/......

hhpuppy
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部