jqueryカスタムテーブルstyle_jquery-jsチュートリアル-php.cn

jqueryカスタムテーブルstyle_jquery

WBOY

リリース： 2016-05-16 15:30:26

オリジナル

1556 人が閲覧しました

この記事の例では、jquery カスタムテーブルスタイルの実装コードについて説明します。皆さんの参考に共有してください。詳細は以下の通りです。
実行中のエフェクトのスクリーンショットは次のとおりです:

上の画像には、デフォルト状態 (グレーと白)、マウスホバー状態 (緑)、およびマウスクリック状態 (黄色) の 3 つの状態があります。
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>

ログイン後にコピー

プラグインの実装コードは次のとおりです:

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

        //默认参数设置
        var settings = {
          evenClass: "tab_even",   //偶数行样式
          oddClass: "tab_odd",    //奇数行样式
          hoverClass: "tab_hover",  //鼠标悬浮样式
          clickClass: "tab_click",  //鼠标点击样式
          isClick: true        //是否开启鼠标点击样式
        };

        //合并参数
        $.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);
              });
            }
          });
        });
      }
})();

ログイン後にコピー

場合によっては、マウスクリック後のスタイルが必要ない場合があるため、制御スイッチとして isClick を設定します。クリックスタイルが不要な場合は、 false に設定してください。
デモは次のとおりです:

<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>

ログイン後にコピー

上記の詳細なコードを通じて、jquery を使用してテーブルスタイルをカスタマイズできるはずです。エディターのテーブルスタイルはまだ完璧ではないため、皆さんが革新を続けて新しいものを作成することを願っています。あなた自身のスタイルが完成しました。