快捷導(dǎo)航

JS實現(xiàn)的樣式切換功能tableCSS實例

更新時間：2016年12月30日 08:53:34 作者：trace332

這篇文章主要介紹了JS實現(xiàn)的樣式切換功能tableCSS,結(jié)合實例形式分析了js頁面元素遍歷與樣式動態(tài)操作相關(guān)技巧,需要的朋友可以參考下

本文實例分析了JS實現(xiàn)的樣式切換功能tableCSS。分享給大家供大家參考，具體如下：

把前陣子寫的JQ插件函數(shù)(alterBgColor )改寫成不基于JQ的代碼,還添加了一個click樣式效果

代碼風(fēng)格還是按照JQ插件風(fēng)格來寫,使用了閉包來循環(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ù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: