OTCHY.NET

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

ツイート

<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>

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

12件のコメント »

• Yunn より:

  2010-03-30 11:14

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

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

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

  ありがとーございました！
• Otchy より:

  2010-03-30 11:19

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

  2010-05-11 14:07

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

  2010-05-11 15:13

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

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

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

  2010-05-11 16:41

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

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

  2010-05-12 11:46

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

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

  2010-05-12 12:57

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

  2010-10-22 17:48

  ありがとうございます。

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

  どんぴしゃりです。
• Otchy より:

  2010-10-22 23:23

  お役に立ててよかったです。
• CSS: 疑似フレームの jQuery プラグイン | BmathLog より:

  2011-01-26 10:06

  [...] http://www.otchy.net/20100308/jquery-tablefix-js-had-released/ カテゴリー: 疑似フレーム   パーマリンク ← GIT: 特定のコッミット時といまとの差分を表示 [...]
• sammy より:

  2011-08-17 09:31

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

  2011-08-17 20:33

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

RSS feed for comments on this post. TrackBack URL