Home JavaScript Greasemonkey PHP

テーブルのヘッダを固定してスクロールする jQuery プラグイン2010-03-08



Excel のウィンドウ枠の固定のように、テーブルのヘッダや左側を固定して、残りの部分をスクロールさせるための jQuery プラグインを書きました。
マークアップはシンプルで、普通にテーブルを書いたら、jQuery の作法でプラグインを呼び出すだけです。

jQuery のおれおれプラグインはいくつか書いた事がありましたが、こうやって公開するのは初めてです。ごてごての機能が欲しいんじゃなくて、単に既存のテーブルを固定スクロール化したいだけの時に、いいのが見つからなくて書いたので、けっこうニーズがあるんじゃないかと思ってます。

下記は簡単なサンプルです。詳細は専用ページを見てみて下さい。

HTML
<table id="tablefix">
    <thead>
    <tr>
        <th rowspan="2">ヘッダA</th>
        <th rowspan="2">ヘッダB</th>
        <th colspan="2">ヘッダC</th>
        <th rowspan="2">ヘッダD</th>
        <th rowspan="2">ヘッダE</th>
    </tr>
    <tr>
        <th>ヘッダ C-1</th>
        <th>ヘッダ C-2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    </tbody>
</table>

JavaScript
$(function() {
    $('#tablefix').tablefix({width: 500, height: 200, fixRows: 2, fixCols: 2});
});

実行結果



ヘッダA ヘッダB ヘッダC ヘッダD ヘッダE
ヘッダ C-1 ヘッダ C-2
データ データ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ
データ データ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ
データ データ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ
データ データ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ
データ データ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ



カテゴリ: Development タグ: jquery javascript html excel