css's special-双色表格

因为某位师兄特别喜欢用双色表格,所以我对此印象特别深刻。给我感觉,双色表格能用到的地方很多,而且给人的感觉也挺不错的,不会太沉闷。今天特意总结两个用css+js实现双色表格的办法,其实原理都差不多。主要的原理是改变奇数偶数行的颜色,i%2作为条件。
一.简单的双色表格实现。
xhtml部分(简单的table):
<TABLE width=300  border=0 class=
mytbcss
   <TR><TD>wanghr100</TD><TD>1</TD></TR>  <!--定义样式tdcss1-->
   <TR><TD>wanghr100</TD><TD>2</TD></TR>  <!--定义样式tdcss2-->
   <TR><TD>wanghr100</TD><TD>1</TD></TR>  <!--定义样式tdcss1-->
   <TR><TD>wanghr100</TD><TD>2</TD></TR>  <!--定义样式tdcss2-->
   <TR><TD>wanghr100</TD><TD>1</TD></TR>  <!--定义样式tdcss1-->
   <TR><TD>wanghr100</TD><TD>2</TD></TR>  <!--定义样式tdcss2-->
   <TR><TD>wanghr100</TD><TD>1</TD></TR>  <!--定义样式tdcss1-->
</TABLE> 
javascript部分:
function cooltable(obj) {
obj.cellSpacing=0;//定义表格单元格之间空白为0。
obj.cellPadding=0;//定义表格单元格内部补白为0。
for  (i=0;i<obj.rows.length;i++)  { 
    if(i%2==0) obj.rows(i).className  =  "tdcss1"//定义奇偶行class。
    else obj.rows(i).className  =  "tdcss2";  
   } 
}
css部分:
* {font-size: 10.5pt}
.tdcss1  {  BACKGROUND-COLOR:  #F7F3F7; } 
.tdcss2  {  BACKGROUND-COLOR:  #FFF7FF; } 
.mytbcss {baobao:expression(cooltable(this))}
或者,还有一句style可以替代掉上面的js与css。如下:
.mytbcss tr{
background-color:expression("#336699,#EEEEEE".split(",")[rowIndex%2])
}
二.鼠标经过颜色转变的双色表格
xhtml部分:
同上。
css部分:
加上一段代码,如下:
.mytbcss tr {
    TableSelect: expression(
        this.sectionRowIndex == -1 ? "" :
        (
            onmouseover = function()
            {
                this.style.backgroundColor =
                (
                    this.style.backgroundColor != "#69cdff" ? "#69cdff" :
                    (
                        this.sectionRowIndex == 0 ? "#FFCCCC" :
                        (
                            this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
                        )
                    )
                )
            },
            onmouseout = function()
            {
                this.style.backgroundColor =
                (
                    this.style.backgroundColor != "#69cdff" ? "#69cdff" :
                    (
                        this.sectionRowIndex == -1 ? "#FFCCCC" :
                        (
                            this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
                        )
                    )
                )
            }
        )
    )
}
这个代码或许看上去很烦人,其实可以再简短一点,我也在思考写一段最短的,可惜小弟不才~~咳咳~继续尝试中····
我看了很多人都说expression不宜多用。至于为什么,大家可以进入http://blog.sina.com.cn/s/blog_5526d86b0100arp8.html这里看看为什么,说得挺详细的。
posted @ 2009-08-27 22:34  free0103  阅读(204)  评论(0编辑  收藏  举报