一个简单的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;
}