jQuery の tableHover で作る、クリックでハイライト表示する表

投稿日: 2011年8月8日 作成者: alphasis

jQuery の tableHover プラグインを使い、表（table）のセルにカーソルを合わせると、そのセルと、そのセルが属する行と列を、それぞれ異なる色でハイライト表示させ、セルをクリックすると、そのセルと、そのセルが属する行と列をハイライト表示させる方法。クリックでハイライト表示させるには、「clickClass」オプションを使う。

実装例（サンプル）

A B C D E
A B C D E
X X X X X
X X X X X
X X X X X
X X X X X
X X X X X

実装例（サンプル）の動作について

表のセルにカーソルを合わせると、そのセルを薄い緑色でハイライト表示する。さらに、そのセルが属する行を薄い赤色でハイライト表示し、列を薄い青色でハイライト表示する。セルをクリックすると、そのセルと、そのセルが属する行と列を、黄色でハイライト表示する。クリックでハイライト表示させたセルを、もう一度クリックすると、黄色のハイライトが消え、元に戻る。

表のヘッダー（thead）やフッター（tfoot）にカーソルを合わせると、その列を薄い青色でハイライト表示する。

表のヘッダー（thead）やフッター（tfoot）をクリックすると、その列を黄色でハイライト表示する。

実装例（サンプル）のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablehover.js"></script>

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-tablehover' ) . tableHover( {
        colClass: 'tablehover-col',
        cellClass: 'tablehover-cell',
        clickClass: 'tablehover-click',
    } );
} );
// -->
</script>
colClass

セルにカーソルを合わせると、そのセルが属する列に、指定したクラス名を追加するオプション。

「tablehover-col」というクラス名を指定した。

cellClass

セルにカーソルを合わせると、そのセルに、指定したクラス名を追加するオプション。

「tablehover-cell」というクラス名を指定した。

clickClass

セルをクリックすると、そのセルと、そのセルが属する行と列に、指定したクラス名を追加するオプション。

「tablehover-click」というクラス名を指定した。

CSS

<style type="text/css">
<!--
table#jquery-tablehover {
    width: 500px;
}
table#jquery-tablehover td {
    border: 1px solid gray;
    text-align: center;
}
table#jquery-tablehover thead,
table#jquery-tablehover tfoot {
    background-color: #bababa;
}
table#jquery-tablehover td.hover {
    background-color: #ffdbdb;
}
table#jquery-tablehover td.tablehover-col {
    background-color: #dbdcff;
}
table#jquery-tablehover td.tablehover-click {
    background-color: #ffdd00;
}
table#jquery-tablehover td.tablehover-cell {
    background-color: #ddffdb;
}
-->
</style>

HTML

<table id="jquery-tablehover">
    <thead>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
            <td>E</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
            <td>E</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
        </tr>
        <tr>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
        </tr>
        <tr>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
        </tr>
        <tr>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
        </tr>
        <tr>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
        </tr>
    </tbody>
</table>

スポンサード リンク

カテゴリー: JavaScript, jQuery, tableHover, プラグイン, 表 パーマリンク