[JS]スタイルシートではできないテーブルの繋がったセルをハイライトするスクリプト -Wholly

サイト構築 -JavaScript

Post on:2014年4月28日

Whollyのデモ

デモページ

デモは3パターンの表組みがあり、セル上にマウスをホバーすると縦列がハイライトします。

左：rowspan, colspan無し

中：rowspan無し、colspan有り

右：rowspan有り、colspan有り

Whollyの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトをhead内に外部ファイルとして記述します。

<head>
  ...
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="js/jquery.wholly.js"></script>
</head>

Step 2: HTML

テーブルは通常通りの実装で構いません。
特定のテーブルのみスクリプトを適用する時は、classやidなどを付与しておきます。

    <table>
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
以下略

Step 3: JavaScript

スクリプトを適用する要素を指定し、スクリプトを実行します。

$(function () {
    var table = $('table');

    table.wholly();

    table.on('wholly.mouseenter', 'td, th', function () {
        $(this).addClass('wholly-highlight');
    });

    table.on('wholly.mouseleave', 'td, th', function () {
        $(this).removeClass('wholly-highlight');
    });
});

ホバーした際に、対象となるセル全てに「.wholly-highlight」のclassを加えます。「.wholly-highlight」にはホバー時のカラーを設定しておきます。