每日一得

不求多得,只求一得 about java,hibernate,spring,design,database,Ror,ruby,快速开发
最近关心的内容:SSH,seam,flex,敏捷,TDD
本站的官方站点是:颠覆软件

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  220 随笔 :: 9 文章 :: 421 评论 :: 0 Trackbacks
key words: css  隔行换色 控制表格  交替颜色

最近用到不少css的东西,发现用css是可以省不少麻烦,特别更改效果。

google了一篇 利用CSS控制表格的交替颜色

下面是实现的代码:

<style type="text/css">
<!--
tr 
{background-color:expression((this.sectionRowIndex==0)?"":
(this.sectionRowIndex%2==0)?"red":"blue")
}
-->
</style>
</HEAD>
<table>
<tr>
<td>第1行</td><td>第1行</td>
</tr>
<tr>
<td>第2行</td><td>第2行</td>
</tr>
<tr>
<td>第3行</td><td>第3行</td>
</tr>
<tr>
<td>第4行</td><td>第4行</td>
</tr>
<tr>
<td>第5行</td><td>第5行</td>
</tr>
</table>

关键就是这一句:
tr {background-color:expression((this.sectionRowIndex==0)?"":
(this.sectionRowIndex%2==0)?"red":"blue")}


对于td的控制如下:
<style type="text/css">
<!--
tr 
{background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
td 
{background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}
-->
</style>
</HEAD>
<table>
<tr><td>第1行</td><td>第1行</td><td>第1行< /td><td>第1行</td><td>第1行</td></tr>
<tr><td>第2行</td><td>第2行</td><td>第2行< /td><td>第2行</td><td>第2行</td></tr>
<tr><td>第3行</td><td>第3行</td><td>第3行< /td><td>第3行</td><td>第3行</td></tr>
<tr><td>第4行</td><td>第4行</td><td>第4行< /td><td>第4行</td><td>第4行</td></tr>
<tr><td>第5行</td><td>第5行</td><td>第5行< /td><td>第5行</td><td>第5行</td></tr>
</table>

cellIndex 

另:和数组一样,第一行从0开始



但愿对你有用.  :)



posted on 2006-06-15 18:14 Alex 阅读(2979) 评论(2)  编辑  收藏 所属分类: web技术

评论

# re: 利用css实现表格的隔行换色 2006-06-15 18:19 晴天娃娃
哈哈  回复  更多评论
  

# re: 利用css实现表格的隔行换色 2006-06-15 19:09 Andy luo
这种css里嵌js的方式在别的浏览器里不支持吧。  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: