文档章节

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
15款提高表格操作的jQuery插件

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

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

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

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

没有更多内容

加载失败,请刷新页面

加载更多

java基础知识,小栗子

来操作一下数组.....注意带参数的变长数组的使用. package com.avatus;import java.util.Random;import java.util.Scanner;public class Main { public static void main(St...

Oh_really
19分钟前
2
0
SSO单点登录PHP简单版

  前面做了一个新项目,需要用户资源可以需要共享。由于之前没有做过这样的东西,回家之后,立马网站百度“单点登录”。帖子很多,甄别之后,这里列几篇认为比较有营养。   http://blog...

slagga
57分钟前
2
0
Java 泛型详解-绝对是对泛型方法讲解最详细的,没有之一

对java的泛型特性的了解仅限于表面的浅浅一层,直到在学习设计模式时发现有不了解的用法,才想起详细的记录一下。 本文参考java 泛型详解、Java中的泛型方法、 java泛型详解 1 概述 泛型在j...

hensemlee
今天
2
0
Annotation注解详细介绍

目录介绍 1.Annotation库的简单介绍 2.@Nullable和@NonNull 3.资源类型注释 4.类型定义注释 5.线程注释 6.RGB颜色纸注释 7.值范围注释 8.权限注释 9.重写函数注释 10.返回值注释 11.@Keep注释...

潇湘剑雨
今天
2
0
一步步编写自己的PHP爬取代理IP项目(二)

这一章节我们正式开展我们的爬虫项目,首先我们先要知道哪个网站能获取到免费代理IP,目前比较火的有西刺代理,快代理等,这里我们拿西刺代理作为例子。 这里就是一个个免费的IP地址以及各自...

NateHuang
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部