一个简单的js实现的隔行变色脚本

 

 

 

 

if  ( typeof  (ocellus)  ==   " undefined " )  ... {
    _o = ocellus = ...{};
}
if  ( typeof  (_o.autoChange)  ==   " undefined " )  ... {
    _o.autoChange = ...{};
}   else   ... {
    alert("AutoChange is already set!");
}
_o.autoChange  =   function  (tbodyID, changeOptions)  ... {
    this.tablebody = _o.DOM.gE(tbodyID);
    if (!this.tablebody) ...{
        return 0;
    }
    this.oP = changeOptions ? changeOptions : ...{};

    var k, def = ...{oddClass:"autoChangeOdd",evenClass:"autoChangeEven", overClass:"autoChangeOver"};
    for (k in def) ...{
        if (typeof (this.oP[k]) != typeof (def[k])) ...{
            this.oP[k] = def[k];
        }
    }
    
    var p = this;
    for (var i=0;i<this.tablebody.rows.length ;i++ )...{
        if (typeof (this.oP.clickListener) == "function") ...{
            this.tablebody.rows[i].onclick=function()...{
                p.oP.clickListener(this.rowIndex,this);
            }
        }
        if (this.tablebody.rows[i].rowIndex%2==1)...{
            this.tablebody.rows[i].className=this.oP.oddClass;
            this.tablebody.rows[i].onmouseover=function ()...{
                if(this.className && (this.className.indexOf(p.oP.oddClass)>=0))...{
                    this.className = this.className.replace(p.oP.oddClass, p.oP.overClass);
                }else...{
                    this.className = p.oP.overClass;
                }
            };
            this.tablebody.rows[i].onmouseout=function ()...{
                if(this.className && (this.className.indexOf(p.oP.overClass)>=0))...{
                    this.className = this.className.replace(p.oP.overClass, p.oP.oddClass);
                }else...{
                    this.className = p.oP.oddClass;
                }
            };
        }else...{
            this.tablebody.rows[i].className=this.oP.evenClass;
            this.tablebody.rows[i].onmouseover=function ()...{
                if(this.className && (this.className.indexOf(p.oP.evenClass)>=0))...{
                    this.className = this.className.replace(p.oP.evenClass, p.oP.overClass);
                }else...{
                    this.className = p.oP.overClass;
                }
            };
            this.tablebody.rows[i].onmouseout=function ()...{
                if(this.className && (this.className.indexOf(p.oP.overClass)>=0))...{
                    this.className = this.className.replace(p.oP.overClass, p.oP.evenClass);
                }else...{
                    this.className = p.oP.evenClass;
                }
            };
        }
    }
} ;
_o.autoChange.onMouseOver  =   function (obj, specialClassName) ... {
    obj.className = specialClassName;
} ;
_o.autoChange.onMouseOut  =   function (obj, normalClassName) ... {
    obj.className = normalClassName;
} ;
if  ( typeof  (_o.DOM)  ==   " undefined " )  ... {
    _o.DOM = ...{};
}
_o.DOM.gE  =   function  (e)  ... {
    var t = typeof (e);
    if (t == "undefined") ...{
        return 0;
    } else ...{
        if (t == "string") ...{
            var a = document.getElementById(e);
            if (!a) ...{
                return 0;
            } else ...{
                if (typeof (a.appendChild) != "undefined") ...{
                    return a;
                } else ...{
                    return 0;
                }
            }
        } else ...{
            if (typeof (e.appendChild) != "undefined") ...{
                return e;
            } else ...{
                return 0;
            }
        }
    }
} ;

在使用时主要有三步，首先要应用隔行变色的tbody必须有id，其次要定义一个用来设置的数组

 

var  as_options  =   ... {
    oddClass:"autoChangeOdd",
    evenClass:"autoChangeEven",
    overClass:"autoChangeOver",
    clickListener: function (rowIndex, theRow) ...{ 
        if(theRow.className && (theRow.className.indexOf(' autoChecked1')>=0))...{
            theRow.className = theRow.className.substring(0,theRow.className.length-12);
        }else...{
            theRow.className = theRow.className + ' autoChecked1';
        }
    }
}

 其中clickListener只能是一个方法，否则会忽略

最后调用AutoChange

 

var  as_change  =   new  ocellus.autoChange( ' goaler1 ' , as_options);

 

下面是测试用的网页

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< html >
< head >
< title >  New Document  </ title >
< meta  name ="Generator"  content ="EditPlus" >
< meta  name ="Author"  content ="" >
< meta  name ="Keywords"  content ="" >
< meta  name ="Description"  content ="" >
< script  language ="JavaScript"  type ="text/javascript"  src ="ocl_autochang.js" ></ script >
< link  rel ="stylesheet"  href ="ocl_autochang.css"  type ="text/css"  media ="screen"  charset ="utf-8"   />

</ head >

< body >
 
< table  width ="800"  border ="0"  cellpadding ="0"  cellspacing ="0" >
     < tbody  id ="goaler1" >
     < tr >
         < td > xxxxxxxx </ td >
     </ tr >
     < tr >
         < td > xxxxxxxx </ td >
     </ tr >
     < tr >
         < td > xxxxxxxx </ td >
     </ tr >
     < tr >
         < td > xxxxxxxx </ td >
     </ tr >
     </ tbody >
</ table >
< br >< br >< br >< br >< br >
< table  width ="800"  border ="0"  cellpadding ="0"  cellspacing ="0" >
     < tbody  id ="goaler2" >
     < tr >
         < td > xxxxxxxx </ td >
     </ tr >
     < tr >
         < td > xxxxxxxx </ td >
     </ tr >
     < tr >
         < td > xxxxxxxx </ td >
     </ tr >
     < tr >
         < td > xxxxxxxx </ td >
     </ tr >
     </ tbody >
</ table >
< script  language ="JavaScript" > ...
<!--
var as_options = ...{
    oddClass:"autoChangeOdd",
    evenClass:"autoChangeEven",
    overClass:"autoChangeOver",
    clickListener: function (rowIndex, theRow) ...{ 
        if(theRow.className && (theRow.className.indexOf(' autoChecked1')>=0))...{
            theRow.className = theRow.className.substring(0,theRow.className.length-12);
        }else...{
            theRow.className = theRow.className + ' autoChecked1';
        }
    }
}

var as_change = new ocellus.autoChange('goaler1', as_options);
var as_options2 = ...{
    oddClass:"autoChangeEven",
    evenClass:"autoChangeOdd",
    overClass:"autoChangeOver",
    clickListener: function (rowIndex, theRow) ...{ 
        if(theRow.className && (theRow.className.indexOf(' autoChecked2')>=0))...{
            theRow.className = theRow.className.substring(0,theRow.className.length-12);
        }else...{
            theRow.className = theRow.className + ' autoChecked2';
        }
    }
}
var as_change = new ocellus.autoChange('goaler2', as_options2);
//-->
</ script >

</ body >
</ html >

 

.autoChangeOdd {...} {
    background-color: #F0F0FF;
}
.autoChangeEven {...} {
    background-color: #F9F9FF;
}
.autoChangeOver {...} {
    background-color: #E0E0FF;
}
.autoChecked1 {...} {
    color: #FF0000;
}
.autoChecked2 {...} {
    color: #00FF00;
}