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

轉載于:https://www.cnblogs.com/ken-admin/p/6405770.html

總結

以上是生活随笔為你收集整理的Js控制样式的诸多方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。