jquery自定義表格樣式

更新時間：2015年11月23日 15:30:39 作者：similar

這篇文章主要介紹了jquery如何自定義表格樣式，分別實現(xiàn)三種樣式：默認狀態(tài)（灰白相間），鼠標懸浮狀態(tài)（綠色），鼠標點擊狀態(tài)（黃色），感興趣的小伙伴們可以參考一下

本文實例講述了jquery自定義表格樣式實現(xiàn)代碼。分享給大家供大家參考。具體如下：
運行效果截圖如下：

上面這張圖有3種狀態(tài)，默認狀態(tài)（灰白相間），鼠標懸浮狀態(tài)（綠色），鼠標點擊狀態(tài)（黃色），是如何實現(xiàn)的吶？
Html代碼如下：

<table>
    <thead>
      <tr>
        <td>編號</td>
        <td>姓名</td>
        <td>年齡</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1111</td>
        <td>1111</td>
        <td>1111</td>
        <td><input type="button" value="查看" /><input type="button" value="刪除" /></td>
      </tr>
      <tr>
        <td>2222</td>
        <td>2222</td>
        <td>2222</td>
        <td><input type="button" value="查看" /><input type="button" value="刪除" /></td>
      </tr>
      <tr>
        <td>3333</td>
        <td>3333</td>
        <td>3333</td>
        <td><input type="button" value="查看" /><input type="button" value="刪除" /></td>
      </tr>
      <tr>
        <td>4444</td>
        <td>4444</td>
        <td>4444</td>
        <td><input type="button" value="查看" /><input type="button" value="刪除" /></td>
      </tr>
      <tr>
        <td>5555</td>
        <td>5555</td>
        <td>5555</td>
        <td><input type="button" value="查看" /><input type="button" value="刪除" /></td>
      </tr>
    </tbody>
</table>

插件實現(xiàn)代碼如下：

(function () {
      $.fn.TabStyle = function (options) {

        //默認參數(shù)設(shè)置
        var settings = {
          evenClass: "tab_even",   //偶數(shù)行樣式
          oddClass: "tab_odd",    //奇數(shù)行樣式
          hoverClass: "tab_hover",  //鼠標懸浮樣式
          clickClass: "tab_click",  //鼠標點擊樣式
          isClick: true        //是否開啟鼠標點擊樣式
        };

        //合并參數(shù)
        $.extend(settings, options);

        return this.each(function () {
          //為奇偶行分別添加樣式
          $(" > tbody > tr:even", this).addClass(settings.evenClass);
          $(" > tbody > tr:odd", this).addClass(settings.oddClass);


          $(" > tbody > tr", this).each(function (i) {
            //鼠標懸浮樣式
            $(this).hover(function () {
              $(this).addClass(settings.hoverClass);
            }, function () {
              $(this).removeClass(settings.hoverClass);
            });
            //鼠標點擊樣式
            if (settings.isClick) {
              $(this).bind("click", function () {
                $(this).addClass(settings.clickClass).siblings("tr").removeClass(settings.clickClass);
              });
            }
          });
        });
      }
})();

有些時候我們可能并不需要鼠標點擊后的樣式，因此設(shè)置了isClick這個作為控制開關(guān)。如果不想要點擊樣式，將其設(shè)置為false即可。
DEMO如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>表格樣式（銀光棒）</title>
  <style type="text/css">
    table{ width:700px; border:1px solid green;border-collapse:collapse;}
    table td{height:40px; text-align:center; width:25%;}
    
    .tab_even{ background-color: #DDD;}
    .tab_odd{ background-color: White;}
    .tab_hover{ background-color: Green;color:White;}
    .tab_click{ background-color: Orange;}
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <td>編號</td>
        <td>姓名</td>
        <td>年齡</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1111</td>
        <td>1111</td>
        <td>1111</td>
        <td><input type="button" value="查看" /><input type="button" value="刪除" /></td>
      </tr>
      <tr>
        <td>2222</td>
        <td>2222</td>
        <td>2222</td>
        <td><input type="button" value="查看" /><input type="button" value="刪除" /></td>
      </tr>
      <tr>
        <td>3333</td>
        <td>3333</td>
        <td>3333</td>
        <td><input type="button" value="查看" /><input type="button" value="刪除" /></td>
      </tr>
      <tr>
        <td>4444</td>
        <td>4444</td>
        <td>4444</td>
        <td><input type="button" value="查看" /><input type="button" value="刪除" /></td>
      </tr>
      <tr>
        <td>5555</td>
        <td>5555</td>
        <td>5555</td>
        <td><input type="button" value="查看" /><input type="button" value="刪除" /></td>
      </tr>
    </tbody>
  </table>
  <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
  <script src="../Scripts/jquery.similar.TabStyle.js" type="text/javascript"></script>
  <script type="text/javascript">
    $("table").TabStyle();
  </script>
</body>
</html>

通過上文詳細的代碼，大家應(yīng)該會利用jquery自定義表格樣式了，小編的表格樣式還不夠完美，還需要進行改進，希望大家在完成這個樣式的基礎(chǔ)上，繼續(xù)創(chuàng)新，做一個屬于自己的表格。

您可能感興趣的文章: