jQuery の tableHover で作る、行と列を違う色でハイライト表示する表

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

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

実装例（サンプル）

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）にカーソルを合わせると、その列を薄い青色でハイライト表示する。

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

読み込み

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

<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( {
        rowClass: 'tablehover-row',
        colClass: 'tablehover-col'
    } );
} );
// -->
</script>
rowClass

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

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

colClass

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

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

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.tablehover-row {
    background-color: #ffdbdb;
}
table#jquery-tablehover td.tablehover-col {
    background-color: #dbdcff;
}
-->
</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, プラグイン, 表 パーマリンク