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

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
データ データ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ
データ データ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ
データ データ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ
データ データ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ
データ データ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ データデータデータデータデータデータデータデータデータデータデータデータ


18 thoughts on “テーブルのヘッダを固定してスクロールする jQuery プラグイン

  1. 通りすがりに、いただいて帰ります。

    帯に短し、たすきに長し・・・なモノが多くて
    私もよくスクロールしたいだけやねんて!って思ってました。
    が、自力でなんとかする力量もなく。。。

    ちなみに、データはasp.netから吐き出して
    jQueryで縞にしたり選択行色付けしたり
    クリック時に横にチャート出して・・・とかやってたもんで
    先にスクロールにしてから、他のことはIDじゃなくてclassで・・・
    とか、やりましたが、それもこちら側のスクリプトいじるだけで
    思い通りになったので、ほんま助かりました。

    ありがとーございました!

  2. まさにそう、既存のプラグインは「帯に短したすきに長し」だったので、作ったプラグインになります。
    お役に立てて良かったです!

  3. 非常に簡単で助かりました。
    しかしこれに行追加&削除&コピー、列追加&削除
    をしたいのですが、どうすればよろしいですか?
    現在tablefixを解析中です

  4. プラグインのページ ( http://www.otchy.net/javascript/tablefix/ ) に、簡単な説明を書いていますが、表示上は 1 つのテーブルであっても、実際は 4 つにコピーされたテーブルを使用して、この動作を実現しています。
    プラグイン実行後の DOM を確認してもらうと、div に囲まれた 4 つのテーブルがあることが確認できるかと思います。

    ですので、行や列の追加削除に関しては、それら 4 つのテーブルに同時に行うことによって可能になります。
    ただ、スクロールの有無について、初期状態でのテーブルの大きさを元に判定している部分があるので、後から行を追加しても意図したとおりにスクロールが発生するとは限りません。
    この点は、静的なテーブルをベースとして考えているこのプラグインの限界でもあります。

    プラグインの内部動作を理解していただければ、行を追加した後、プラグインの効果をいったんキャンセルしてから、再実行するような実装の方が簡単かも知れないですね。

  5. ご回答ありがとうございます。
    プラグインのキャンセルとはどのようにすればよいのですか?
    初歩的な質問で申し訳ありません。
    納期が迫っており困っております。
    簡単なサンプルとかあれば助かります。

    私の方でも色々調べてやれるだけやってみます。

  6. 具体的に言うと、プラグインの内部動作を理解した上で、その逆の操作をする、という事になります。
    プラグインの動作が理解できれば、プラグインを使用しなくてもテーブルの固定スクロールを実現する方法が分かるかと思うので、プラグインを使わずに実装するというのも、別の方法として考えられますね。プラグインを使わなければ、全てが手の内になるので様々な動作を実現可能かと思います。

    心中お察ししますが、残念ながら私は教師でも上司でもないので、これ以上のサポートは致しかねます。
    社内で技術力のある方に尋ねるか、もっと人数の多いコミュニティに頼るなどした方が良いでしょう。

  7. ご丁寧に教えていただきありがとうございます。
    列&行の追加削除
    スクロールバーの動的移動
    およびハイライト表示することができました。
    必要以上のサポートを依頼してしまい
    申し訳ありませんでした。

  8. ありがとうございます。

    framesetでやりかけたのですが、諦めて困って探してました。

    どんぴしゃりです。

  9. jQueryのみでここまで出来てとても素晴らしいと思います。
    ただ、一点気になる点があるのですが、横に伸びるスライドバーを右はじまでスライドすると固定しているヘッダのセルとボディのセルとで縦のスライドバー分のズレが生じています。

  10. 報告ありがとうございました。
    さほど大きな問題ではなく、私自身の実用上で困っている部分はないので、すぐに対応する予定はありませんが、将来的なバージョンアップでは修正を検討していこうと思います。

  11. そんな大げさなw ありがとうございます。

  12. 大変便利で助かってます。

    固定項目のすぐ下に <a>で指定したアンカーを先頭にして内容を表示する方法はありますか?
    できれば、さらにうれしいです。

  13. テーブル内のアンカーに対してリンクして飛びたい、という意図でしょうか?
    その場合、現在のプラグインの仕組み上、アンカー自体も最大5つに複製されてしまうため、対応が難しいです。

  14. Script適用後の動作は、大変素晴らしく参考になりました!

    しかし、500件を超えた件数の一覧をこのScriptでヘッダー固定にすると、処理が重すぎて応答がなくなってしまいます。
    このScriptは、どのくらいの件数まで見込んでいますか?
    また、処理を高速化する裏ワザなどはございますか?

    ※ 組み込み方が悪いのか、判断したいのです。

  15. 具体的に試したことは無いのですが、このプラグインの仕組み上、全部でテーブルが 5 つに分裂してそれぞれをスクロールさせるため、500 件にもなると実際には 2500 件を同時に扱っている状態になるため、だいぶ重くなってしまうのではないかと思います。

    プラグインでやる以上、どうしても汎用性を考えた作りになるので、裏技、というわけではありませんが、このプラグインの使用を諦めて、自力で固定部分とそれ以外の部分を出力し、それぞれのスクロールを同期させるように作れば、500 件を 2500 件に増やすこと無く、同様の効果を得ることが出来るのではないかと思います。

    このプラグインで完全なテーブルのコピーを作っているのは、ブラウザによって自動的に決定される各セルの幅を、固定部とスクロール部で共通化するためなので、ケースが特定されているのであれば、その部分を丁寧にデザインすることで、軽く作ることも出来るのではないかと考えられます。

コメントを残す

メールアドレスが公開されることはありません。