文档章节

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

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

码上生花,ECharts 作品展示赛正式启动!>>>

表格中的一条数据很长为了不要看错上下两行,一般为使上下两行的数据背景颜色不一样来区别。在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
437
0
ExtJS4.1.1 设置表格背景颜色 修改文本颜色 在表格中插入图片

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

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

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

ricardohn
2016/03/28
69
0
layui table指定某一行样式

###1.想指定layui table中某一行的样式,找了这个资源可行。转自: https://blog.csdn.net/weixin44729896/article/details/100524824 效果如下图: ####2.设置Layui表格字段的字体颜色,这个...

osc_k9z4xzi8
2019/11/05
10
0
作为医生,除了买花,还能在情人节用什么特别的方式表白呢?(情书-病历体)

该病历由南京都昌电子病历编辑器直接制作后导出(包括背景图片,不是后期P上去的) 1. 文档操作:支持文档的基本操作,包括新建、打开、保存、另存为、剪切、复制、粘帖、选择性粘帖、撤销、...

袁永福 电子病历,医疗信息化
2018/02/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Http和Nginx反代至Tomcat(LNMT、LAMT)

Http和Nginx反代至Tomcat(LNMT、LAMT) ================================================================================ 概述: 本章将主要介绍Http和Nginx反代至Tomcat,具体内容如下......

osc_facwbzof
56分钟前
17
0
mysql备份之mysqldump工具

参考文档: 利用mysqldump+二进制日志实现备份恢复数据库:http://www.178linux.com/60616 mysql进阶篇(三种备份方法总结:lvm, mysqldump, xtrabackup):http://www.178linux.com/9781 注意...

osc_ur9mmbck
57分钟前
25
0
实战nginx前端反代MogfileFS及负载均衡

实战nginx前端反代mogfilefs及负载均衡 =============================================================================== 实验描述: 使用Nginx代理请求至tackers,实现通过键就可以访问到...

osc_jvzgahav
59分钟前
9
0
Xshell远程操作liunx图形化桌面(xmanager,远程桌面)

必要条件: 1、安装全套的xmanager程序 2、Linux系统安装了图像界面 ~]# yum grouplist    # 查看可安装的桌面组件~]# yum groupinstall "组件名" 3、在shell远程连接主机的属性里...

osc_a45vpoh4
59分钟前
11
0
zabbix基础配置(二)

zabbix基础配置(二) ============================================================================= 概述: 本章我们将继续介绍zabbix的基础配置,具体内容如下: zabbix-agent的安装、...

osc_7bkuddw5
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部