JS實(shí)現(xiàn)的樣式切換功能tableCSS實(shí)例
本文實(shí)例分析了JS實(shí)現(xiàn)的樣式切換功能tableCSS。分享給大家供大家參考,具體如下:
把前陣子寫的JQ插件函數(shù)(alterBgColor )改寫成不基于JQ的代碼,還添加了一個(gè)click樣式效果
代碼風(fēng)格還是按照J(rèn)Q插件風(fēng)格來寫,使用了閉包來循環(huán)設(shè)置TR元素的樣式
function TableCss(options){ //如果沒參數(shù),就退出 if(arguments.length < 1 || !document.getElementById(options.tableName) ) { return ;} //參數(shù)及默認(rèn)參數(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; //點(diǎn)擊樣式 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; } } //鼠標(biāo)HOVER樣式,如果已經(jīng)是點(diǎn)擊樣式,則不變化 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;寫了三遍,本來是寫在一個(gè)function里的,但不知道在閉包里那么寫會(huì)不會(huì)影響性能(任務(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動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
- css列表標(biāo)簽list與表格標(biāo)簽table詳解
- jQuery+CSS實(shí)現(xiàn)的table表格行列轉(zhuǎn)置功能示例
- jquery css 設(shè)置table的奇偶行背景色示例
- JavaScript和CSS通過expression實(shí)現(xiàn)Table居中顯示
- 拖動(dòng)table標(biāo)題實(shí)現(xiàn)改變td的大小(css+js代碼)
- CSS+Table圖文混排中實(shí)現(xiàn)文本自適應(yīng)圖片寬度(超簡單+跨所有瀏覽器)
- css之使table也能overflow:hidden
- 推薦一個(gè)好看Table表格的css樣式代碼詳解
相關(guān)文章
js 關(guān)于=+與+=日期函數(shù)使用說明(賦值運(yùn)算符)
js 關(guān)于=+與+=日期函數(shù)使用說明(賦值運(yùn)算符),可以看下,就是一些運(yùn)算符的使用,看哪個(gè)更適合你。2011-11-11JS+CSS實(shí)現(xiàn)仿新浪微博搜索框的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿新浪微博搜索框的方法,實(shí)例分析了javascript針對搜索框樣式的控制技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02css transform 3D幻燈片特效實(shí)現(xiàn)步驟解讀
3D幻燈片特效想必大家以不在陌生至于表現(xiàn)形式一般都是拘泥于傳統(tǒng)接下來為大家介紹下使用css3 transform配合js以及html實(shí)現(xiàn)3D幻燈片特效2013-03-03Javascript 淺拷貝、深拷貝的實(shí)現(xiàn)代碼
Javascript中的對像賦值與Java中是一樣的,都為引用傳遞.就是說,在把一個(gè)對像賦值給一個(gè)變量時(shí),那么這個(gè)變量所指向的仍就是原來對像的地址.那怎么來做呢 答案是克隆.2008-12-12仿服務(wù)器端腳本方式的JS模板實(shí)現(xiàn)方法
仿服務(wù)器端腳本方式的JS模板實(shí)現(xiàn)方法...2007-04-04Bootstrap3 圖片(響應(yīng)式圖片&圖片形狀)
這篇文章主要介紹了 Bootstrap3 圖片 響應(yīng)式圖片和圖片形狀的相關(guān)資料,需非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01JavaScript使用canvas繪制坐標(biāo)和線
這篇文章主要為大家詳細(xì)介紹了JavaScript使用canvas繪制坐標(biāo)和線,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04