jQuery の tableHover プラグインで作る行と列をハイライト表示する表

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

jQuery の tableHover プラグインを使い、表（table）のセルにカーソルを合わせると、そのセルが属する行と列をハイライト表示させる方法。表（table）のセルにカーソルを合わせると、そのセルが属する行と列をハイライト表示させるには、「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( {
        colClass: 'hover'
    } );
} );
// -->
</script>
colClass

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

「hover」というクラス名を指定した。

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: #dadada;
}
-->
</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, プラグイン, 表 パーマリンク