文档章节

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

小强斋太
 小强斋太
发布于 2016/11/09 20:06
字数 287
阅读 7
收藏 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
广州
私信 提问
ExtJS4.1.1 设置表格背景颜色 修改文本颜色 在表格中插入图片

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

南風
2014/08/22
0
0
HTML5全栈开发中表格的设计方法

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

菜鸟哈哈哈
2016/06/12
262
0
Bootstrap学习2

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

ricardohn
2016/03/28
64
0
15款提高表格操作的jQuery插件

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

鉴客
2010/08/12
5.7K
1
DataGridview拾遗

绑定数据(DataSource)时,不自动生成列 AutoGenerateColumns = false; 2. 添加按钮列(可视化编辑) ColumnType设置为DataGridViewButtonColumn,设置Text(按钮上的文字),UseColumnTextForB...

山里来的鱼
2016/08/10
8
0

没有更多内容

加载失败,请刷新页面

加载更多

如何从复杂单体应用快速迁移到微服务?

想必你已知道了微服务及其工作原理,现在是时候探讨如向微服务转变这个关键话题了。 为什么要向微服务转变 整体式(monolithic)应用程序很庞大(代码行数方面)、很复杂(功能依赖和数据等方...

架构师springboot
18分钟前
0
0
Maven与打包方式总结

一. war包 一般都是直接打成war包即可, 相关依赖都会放到 WEB-INF/lib 下. <plugin> <artifactId>maven-war-plugin</artifactId> <configuration> <version>3.0</version>......

foreach
20分钟前
0
0
JDBC详解

一、相关概念 1.什么是JDBC   JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接...

木云凌
42分钟前
0
0
分布式之延时任务方案解析

方案分析 (1)数据库轮询 思路 该方案通常是在小型项目中使用,即通过一个线程定时的去扫描数据库,通过订单时间来判断是否有超时的订单,然后进行update或delete等操作 实现 博主当年早期是用...

微笑向暖wx
46分钟前
1
0
博客目录

1.剑指offer目录 剑指offer目录 2.开放的面试题 开放面试题目录

细节探索者
46分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部