JS實現(xiàn)的樣式切換功能tableCSS實例
本文實例分析了JS實現(xiàn)的樣式切換功能tableCSS。分享給大家供大家參考,具體如下:
把前陣子寫的JQ插件函數(shù)(alterBgColor )改寫成不基于JQ的代碼,還添加了一個click樣式效果
代碼風格還是按照JQ插件風格來寫,使用了閉包來循環(huán)設(shè)置TR元素的樣式
function TableCss(options){ //如果沒參數(shù),就退出 if(arguments.length < 1 || !document.getElementById(options.tableName) ) { return ;} //參數(shù)及默認參數(shù) 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" } //根據(jù)ID找到表格元素 var tableName = document.getElementById(options.tableName); var tr = tableName.getElementsByTagName("tr"); //對TR元素循環(huán)設(shè)置 for(var i=0, len=tr.length; i<len; i++){ //用了閉包 (function(k){ //設(shè)置奇偶行樣式 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樣式,如果已經(jīng)是點擊樣式,則不變化 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) } } //調(diào)用 TableCss({tableName:"tb1"});
效果很簡單,代碼也很簡單.
只是這句tr[k].className = (k%2==0)? options.oddClass : options.evenClass;寫了三遍,本來是寫在一個function里的,但不知道在閉包里那么寫會不會影響性能(任務(wù)管理器里也沒看到有CPU使用率暴漲的情況),最后還是決定這么寫,呵呵.
測試代碼:
<style> <!-- #tb1, #tb1 td{ border:1px solid #000;border-collapse:collapse} .tr_even { background:#CCC;} .tr_odd { background:#9FF;} .tr_hover { background:#FF6;} .tr_click { background:#00F;} --> </style> <table id="tb1" cellpadding="1" cellspacing="1"> <tr> <td>123</td> <td>456</td> <td>123</td> <td>456</td> <td>123</td> <td>456</td> </tr> <tr> <td>123</td> <td>456</td> <td>123</td> <td>456</td> <td>123</td> <td>456</td> </tr> <tr> <td>123</td> <td>456</td> <td>123</td> <td>456</td> <td>123</td> <td>456</td> </tr> <tr> <td>123</td> <td>456</td> <td>123</td> <td>456</td> <td>123</td> <td>456</td> </tr> </table>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
js 關(guān)于=+與+=日期函數(shù)使用說明(賦值運算符)
js 關(guān)于=+與+=日期函數(shù)使用說明(賦值運算符),可以看下,就是一些運算符的使用,看哪個更適合你。2011-11-11css transform 3D幻燈片特效實現(xiàn)步驟解讀
3D幻燈片特效想必大家以不在陌生至于表現(xiàn)形式一般都是拘泥于傳統(tǒng)接下來為大家介紹下使用css3 transform配合js以及html實現(xiàn)3D幻燈片特效2013-03-03Bootstrap3 圖片(響應(yīng)式圖片&圖片形狀)
這篇文章主要介紹了 Bootstrap3 圖片 響應(yīng)式圖片和圖片形狀的相關(guān)資料,需非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-01-01