利晶设计机构博客

关注研究网站设计及SEO网站优化技术!致力于为客户提供最专业、最有效的全方面网站设计解决方案。

订阅RSS

CSS样式+JS使用Table隔行变颜色

类别:网站前端开发    时间:2012-05-17

JS代码:

<!--
function onloadEvent(func){
    var one=window.onload
    if(typeof window.onload!='function'){
        window.onload=func
    }
    else{
        window.onload=function(){
            one();
            func();
        }
    }
}
function showtable(){
    var tableid='table';      
    var overcolor='#EEEEEE';   
    var color1='#FFFFFF';       
    var color2='#F8F8F8';       
    var tablename=document.getElementById(tableid)
    var tr=tablename.getElementsByTagName("tr")
    for(var i=1 ;i<tr.length;i++){
        tr[i].onmouseover=function(){
            this.style.backgroundColor=overcolor;
        }
        tr[i].onmouseout=function(){
            if(this.rowIndex%2==0){
                this.style.backgroundColor=color1;
            }else{
                this.style.backgroundColor=color2;
            }
        }
        if(i%2==0){
            tr[i].className="color1";
        }else{
            tr[i].className="color2";
        }
    }
}
onloadEvent(showtable);
-->

CSS样式:

.ContentRight .products .text table{ width: 100%; border-collapse:collapse;}
.ContentRight .products .text table td{ border: 1px solid #ccc; padding-left: 7px; line-height: 21px; }
.ContentRight .products .text table .th td{ background: #E9EAE9; line-height: 25px; font-weight:bold;}
#table tr.color1{ background-color:#fafafa;}
#table tr.color2{ background-color:#fff;}

转载声明:
原载:利晶科技博客 - 关注研究最新网站设计技术及SEO网站优化!
本文链接:http://www.ljun.net/blog/28.html
如需转载必须以链接形式注明原载或原文地址,谢谢合作!

文章分类

服务项目

友情链接

Copyright © 2006-2012 利晶设计机构 版权所有