Js控制样式的诸多方法

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"});