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这里看看为什么，说得挺详细的。

转载于:https://www.cnblogs.com/free0103/archive/2009/08/27/1555441.html