function TableCss(options){

//如果没参数,就退出

        if(arguments.length < 1 || !document.getElementById(options.tableName) ) { return ;}

//参数及默认参数

        var options = {

                tableName : options.tableName,

                evenClass : options.evenClass || "tr_even",

                oddClass   : options.oddClass || "tr_odd",

                clickClass  : options.clickClass || "tr_click",

                hoverClass: options.hoverClass || "tr_hover"

                }

//根据ID找到表格元素

        var tableName = document.getElementById(options.tableName);

        var tr = tableName.getElementsByTagName("tr");

//对TR元素循环设置

        for(var i=0, len=tr.length; i<len; i++){

//用了闭包

                (function(k){

                        //设置奇偶行样式          

                        tr[k].className = (k%2==0)? options.oddClass : options.evenClass;

//点击样式

                        tr[k].onclick = function(){

                                if (tr[k].className == options.clickClass){

                                        tr[k].className = (k%2==0)? options.oddClass : options.evenClass;

                                }

                                else {

                                        tr[k].className = options.clickClass;

                                }

                        }

                        //鼠标HOVER样式,如果已经是点击样式,则不变化

                        tr[k].onmouseover = function(){

                                if(tr[k].className == options.clickClass ){ return false;}

                                else { tr[k].className = options.hoverClass;}

                        }

                        tr[k].onmouseout = function(){  

                                if(tr[k].className == options.clickClass){ return false;}

                                else {  

tr[k].className = (k%2==0)? options.oddClass : options.evenClass;

}

                        }

                        

                        

                 })(i)

        }

}

//调用

TableCss({tableName:"tb1"});

posted on 2017-02-16 15:01  遥望末班车  阅读(258)  评论(0编辑  收藏  举报