超简单表格隔行换色+鼠标经过变色(ie6,ie7,ff)

[Tony]

前几天由于工作需要,要对一个表格进行隔行换色,还要加上鼠标经过效果,但是表格由程序生成,如果在tr标签中添加onmouseover,onmouseout效果的话工作量很大,遂尝试用js实现以上功能,唯一要对表格做的改动就是给table标签加上id.

从网上搜索了很多方法,几乎都是对tr标签进行修改,还好找到了一个完全通过js实现隔行换色的(经过转载已无法考证作者),不过不支持鼠标经过变色,经过我的修改现在已经支持鼠标经过变色了.
这段代码体现了web重构的思想,实现了结构与表现分离.
使用方法:
1.给你的table加上一个id.这个例子中我加的id是table.
2.将以下代码插入到head区中,按照注释修改颜色和id.

<style language="text/css">
/*第一种颜色*/
#table tr.color1{
    background-color:#FFFFFF;
}
/*第二种颜色*/
#table tr.color2{
    background-color:#F8F8F8;
}
</style>
<script type="text/javascript">
<!--
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';        //表格的id
    var overcolor='#FCF9D8';    //鼠标经过颜色
    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);
-->
</script>

3.enjoy it.

感谢原作者,也谢谢你用一点点时间看完了我这个帖子.希望这段代码能给你带来方便.