定义table奇偶行样式

最新推荐文章于 2020-10-11 21:06:16 发布

mengxj85

最新推荐文章于 2020-10-11 21:06:16 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： table function null

本文链接：https://blog.youkuaiyun.com/mengxj85/article/details/4204932

今晚在网上找到一个感觉挺不错的table奇偶行样式，经过小整理一下放到这里收藏，同时与需要的朋友一起分享

.mytablecss
{
font-size: 12px;
color: #333333;
text-decoration: none;
width: 400px;
cursor: hand;
background-color: #FFFFFF;
vertical-align: middle;
text-align: center;
cellspacing: 1;
}
.mytablecss tr
{
background-color: expression(this.sectionRowIndex == 0 ? "#FFCCCC" : ((this.sectionRowIndex % 2 == 0) ? "#FFF0F0" : "#F0F0FF"));
color: expression(this.sectionRowIndex == 0 ? "#FFFFFF" : "");
font-weight: expression(this.sectionRowIndex == 0 ? "BOLD" : "");
tableselect: expression(this.sectionRowIndex == 0 ? "" :
  (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 == 0 ? "#FFCCCC" : (this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"))
    )
   }
  )
    )
}
.mytablecss td
{
background-color:expression(this.cellIndex == 0 ? (this.parentElement.sectionRowIndex == 0 ? "#FFCCCC" : "#DDDDDD") : null)
}