jquery.tablefix.js

»Download

jquery.tablefix.js は、Excel のウィンドウ枠固定のように、テーブルのヘッダや左側を固定して、残りの部分をスクロールさせるための、jQuery プラグインです。

JavaScript 無効時はただのテーブルとして普通にそのまま表示される点と、他の類似品と違ってソート変更などの高度な機能がない代わりに、すでにデザイン済みの任意のテーブルにそのまま適用出来る点が特徴です。
読み込むのはプラグインだけで、追加の css や画像ファイルは必要ありません。

使い方

  1. 普通にテーブルをデザインする
  2. jQuery とプラグインを読み込む
  3. jQuery のセレクタでテーブルを選択して、プラグインを呼び出す

これだけで、あとはプラグインがよかれにやってくれます。

プラグインの呼び出し方

$('tableSelector').tablefix({width: 600, height: 400, fixRows: 1, fixCols: 2});

指定可能なオプション

width
テーブル全体がこの横幅に収まるようにします。
height
テーブル全体がこの縦の長さに収まるようにします。
fixRows
テーブル上部で固定するヘッダの行数を指定します。
fixCols
テーブルの左側で固定する列数を指定します。

オプションは全てを設定する必要はありません。
例えば height と fixCols を指定しなければ、縦の長さは元のテーブルのまま横スクロールだけが発生し、固定列は無くテーブル全体が横スクロールします。
また、width / height を両方とも指定しない場合や、指定した width / height が元々のテーブルサイズよりも大きい場合など、固定スクロールを必要としない場合は、無理にスクロールを追加したりしません。

サンプル

HTML

<table id="tablefix1">
    <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>
<br />
<table id="tablefix2">
    <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>
    </tbody>
</table>
<br />
<table id="tablefix3">
    <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>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    </tbody>
</table>

JavaScript

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

実行結果

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

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

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


制限事項

  • テーブルの中にフォームが含まれるとフォーム自体が誤動作する可能性があります。
  • テーブルに colspan や rowspan が含まれる場合、その位置によっては正しく動作しない場合があります。
  • jQuery 1.2 系では動作しません。1.3 系、1.4 系で動作するはずです。

技術的な話

既存の様々な実装を参考にしつつ、固定スクロールを実現するために、以下のような方法を使っています。
細かい部分は省いていますが、概ねこんな感じです。

  1. 元のテーブルから、スクロールさせる原点となる座標を求める。
  2. テーブルを 3 つコピーして、全部で 4 つの全く同じテーブルを用意。
  3. 全体を 1 つの div で囲い、さらに 4 つのテーブルの周りをそれぞれまた div で囲う。
  4. 全体の div に対しては、”relative”、4 つの div は “absolute” に position を指定。
  5. 4 つの div がそれぞれ、左上固定部 / 上固定行 / 左固定列 / スクロール部 になるよう、スクロール原点に合わせて、left と top を動かす。
  6. 4 つの div それぞれに、画面上に見せたい範囲の width と height を設定する。
  7. 上固定行 / 左固定列 / スクロール部 については、見えてはいけない部分を隠すため、ネガティブマージンを設定する。
  8. 上固定行 / 左固定列は、overflow を hidden にして、スクロールをスクロール部と同期させる。

更新履歴

2010-03-08 [Ver 1.0.0]
初版リリース
2013-06-13 [Ver 1.0.1]
複数のエレメントに対して適用した際に、width と height が少しずつずれていく問題を修正。

ライセンス

ライセンスは MIT License (日本版 wikipedia の項) で公開します。

112 thoughts on “jquery.tablefix.js

  1. こちらで紹介されているサンプルのヘッダAのデータ部分に
    ラジオボタンを組み込んでみたのですが、上手く動きません。

    マウスでの選択はできるのですが、
    上下のキー操作でラジオボタンの選択を切り替えようとすると、
    ラジオボタンのカーソルがヘッダ部に埋もれてしまいます。

    どなたかこの現象を回避する方法をご存知でしたら、ご教授願います。

  2. yamada さんへの回答でも書いているように、見えていないフォームに対して、disabled にするという対策が有効かも知れません。
    jquery.tablefix.js を作成した当初は、フォームと組み合わせた利用を想定していなかったため、いずれバージョンアップを行う時には、そういった対応も組み込めたらいいな、とは思っています。

  3. 早急な回答ありがとうございます。
    上記方法で試してみようと思います。

  4. 素晴らしいプラグインで感動しました。

    jQueryに足を突っ込んだ初心者です。
    初歩的な質問で申し訳ありません。

    ウィンドウサイズに表を合わせ、あわよくばブラウザのスクロールバーで表のスクロールをさせたいと考えてます。

    その一歩として、スタイル設定で%を指定したのですが、下記のように指定するとtablefix.jsを適用する前のテーブルで表示されてしまいます。
    どこか修正する必要があるのでしょうか?

    $(function() {
    $(‘#tablefix1’).tablefix({width: 50%, height:50%, fixRows: 1, fixCols: 1});
    });

    過去のログを拝見するに、4つに分けられた要素の中を手動で書き換えてあげる等が必要になってくるの?と考えてます。

  5. 使いやすい、便利なプラグイン作成ありがとうございます。
    利用をさせていただこうと勇んで設置したのですが。。。

    印刷されることを想定してサイトを作成しているもので、
    印刷時には表を全て表示したいのです。
    どうすれば、印刷時と表示が切り替えられるか、知識が足りず書き込みをさせていただきました。

    改善方法等ございませんでしょうか?
    お知恵いただけると助かります。
    どうぞよろしくお願いいたします。

  6. コメント通知メールが止まってしまっていたことに気づかず、ずっとコメントを放置してしまっていました。申し訳ありませんでした。

    さてご質問の件ですが、jquery.tablefix.js 自体が % でのサイズ指定を想定した作りになっていないため、これに対応しようと思うと大幅な改修が必要になってしまいます。
    「下記のように指定するとtablefix.jsを適用する前のテーブルで表示され」るというのは恐らく、エラーになってそこで動作が止まってしまっているためではないかと予想されます。

    ウィンドウサイズに表を合わせてスクロールさせるような動作をさせたい場合、jquery.tablefix.js では対応できず、類似の別のプラグインを探すか、専用に jQuery でスクリプトを書くか、の二択になってしまうかと思います。
    お力になれず、恐縮です。

  7. ブラウザ上での表示と、印刷時の表示を変えるための仕組みとして「メディアクエリ」というものがあります。
    これは css の記述方法の一種で、それについて検索していただくと手法が分かるかと思いますので、ご検討下さい。

    jquery.tablefix.js を使う場合、ブラウザ用の table とは別に印刷用の table も html には書いておいて、ブラウザでは印刷用の table を隠し、印刷時は tablefix 用の table を隠す、という風に css を書くと上手くいくのではないかと思います。

  8. はじめまして。質問させて下さい。
    サンプルで、テーブルをHTMLでベタ書きされていますが
    このテーブル自体をcsvファイルを読み込ませてテーブルを作ることは
    可能でしょうか??

    したいことは、テーブルをHTMLで固定で作るのではなくcsvを読み込ませることで
    csvファイルを変えるだけで表示させる内容を簡単に変えられるようにしたいです。
    ご教授いただけますでしょうか?

  9. jquery.tablefix.js 自体にそういった機能はありませんが、csv をテーブル化するような jQuery プラグイン / ライブラリなどを公開されている方は多くいるようです。
    下記 URL など参照してみて下さい。

    https://www.google.co.jp/search?q=csv+table+js

  10. 素晴らしいプラグインありがとうございます。

    Ctrl + Fの検索機能を利用し検索した場合、テーブルの表示が崩れますが
    何か対策ありませんでしょうか。

  11. これ、すごく便利ですね!
    設置が簡単なのがウレシイです。
    素敵なプラグインなので、githubに公開したら良いんじゃないですかね・・・??

    ありがとうございます。

  12. はじめまして。これは使えます。コードもとても美しいです。
    ただ、テーブルをcloneしたとき idが重複しないでしょうか?
    それで、javascriptで tr や td にアクセスできないのではないかと思います。
    cloneの際、row と col テーブルにはidの後ろに_row, _colを付けられたらと思うのですが、
    いかがでしょうか?
    もし、そうでしたら、修正は可能でしょうか?
    修正のし方を教えて頂ければ大変助かります。
    宜しくお願いします。

  13. >okw さん
    それが問題として存在することは分かっているのですが、このプラグインの仕組み上、対策するのが難しい感じです。
    むしろ誰か対策方法があれば教えて欲しいです><

    >itmammoth さん
    ありがとうございます。光栄です!このプラグインを公開したのはかれこれ 2 年くらい前で、その頃は今ほど gifhub は流行ってなかったんです。
    現状で言うと、自分の中にそこまでの熱がないというのが正直なところでして、いつか Ver.2 を書くことがあれば、検討したいと思います。

    >Shira さん
    コードの美しさまで褒めてもらえると、とても嬉しいですね。
    id 重複の問題については把握していました。
    ですが、id でスタイルを指定しているテーブルがあった場合に、id を変えてしまうとテーブルのデザインが変わることで、レイアウトが崩れるという現象が発生します。
    世の中的に id を重複して使ってしまっている人が多くいて、それに合わせてブラウザ側の実装も重複 id に対応して、意図通りにスタイルを適用している、という現実も鑑みて、そのままという判断を行いました。
    とはいえ、id 重複が気持ち悪い、という感覚は分かります。独自に修正されると言うことでしたら、それは簡単です。
    58 行目辺り、table を clone したあとで、例えば以下のようにすれば実現できます。
    rowTable.attr(‘id’, rowTable.attr(‘id’) + ‘_row’);

  14. Otchy さま
    素早いRes有り難うございます。
    軽くて使いやすくて良いライブラリ有り難うございます。

  15. 素晴らしいプラグインありがとうございます。

    fixRows、fixColsいずれかの指定だとテーブル外にスクロールバーが表示されていますが、
    fixRowsとfixColsの両方を指定した場合、スクロールバーがテーブル内に入ってしまうのですが回避方はないでしょうか?

  16. 確かにご指摘の通りの動作となっているのですが、行だけあるいは列だけスクロールさせた時に、スクロールバーの位置を調整しようとすると、OS やブラウザによっては、行だけスクロールして欲しいのに、列もスクロールバーが表示されてしまうという状況が発生してしまいます。
    これらを、概ね全ての OS とブラウザで綺麗に見せるために、確実にテーブルの外側にスクロールバーが表示させるような調整をしています。

    ですので、ソースを解析頂いてスクロールバーがテーブルの外になるよう調整している部分を修正すれば、スクロールバーをテーブルの内側に表示することは可能です。
    しかしながら、テーブルの内側にスクロールバーが表示されるよう調整すると、表示している環境によっては不要なスクロールバーが表示されてしまうことになるのでお勧めしません。

  17. 高さ方向を固定したテーブルがあるときで、
    指定した高さに到達している場合、
    動的にテーブルに行追加しようとしても、
    追加することができません。
    (高さが指定した高さに満たない場合は、行追加できます。)

    何か回避策はありませんか。

  18. jquery.tablefix.js では、適用時の静的なテーブルのサイズを元に行固定などの処理を行うため、動的な行の追加は想定されていません。

    なお、固定部分とスクロール部分は HTML 上異なるテーブルで表現され、元々 1 つのテーブルは全部で 4 つにコピーされています。
    ですので、4つのテーブル全てに同時に行を追加すれば、後からでも上手く動作させることが出来るかも知れません。
    こちらお試しいただければと思います。

  19. 素晴らしいプラグインの作成・公開ありがとうございます。
    現在スクロールバーを下に付けて利用させて頂いております。
    これを上下に付けることは可能でしょうか?

  20. jquery.tablefix.js の仕組みにおいて、スクロールバーはブラウザ固有のスクロールバーをそのまま利用する形になっています。
    従って、通常はブラウザのスクロールバーが下にしか付かないため、jquery.tablefix.js においてもそのままの動作となり、上下に付けることは出来ません。

  21. 毎度お世話になっております。
    質問です。
    tablefixをクラス指定して複数回利用すると、引数で受けたoptionsのwidthとheightが、指定のサイズより小さくなってしまいます。
    デバッグしてみると、前回の呼び出し時に算出したoptions.widhtとoptions.heightを採用しているようでした。
    これを回避して、毎回指定したサイズをもとにスクロールバーを表示させるにはどのようにしたら良いでしょうか。
    初心者ですみませんが、ご教示いただければと思います。

  22. 書き込み通知に気づかずに、コメント承認が遅くなって申し訳ありませんでした。
    ご指摘いただいた点は簡単に修正できるバグだったので修正版をリリースしました。最新版でお試し下さい。

  23. いつも活用させて頂いてます。
    非常に助かってます。

    今回、jQueryのタブ内のtableに対してはtablefixさせようとしたら、
    スクロールが表示されません…

    タグの記述はそのままに、タブの外に持ってくると表示されました。
    jQueryのタブ内だとうまく動作しないんですか?

  24. jQuery のタブというのが何を指しているのか分からないのですが、なんらかの jQuery プラグインだとして、その実装によっては上手く動かない可能性は確かにあります。
    tablefix 実行時にそのテーブルの高さや幅を計算して処理を行っているので、その時点で表示されていない (=テーブルの高さや幅が取得出来ない) ような場合は、恐らく失敗します。

  25. Uncaught TypeError: Object [object Object] has no method ‘tablefix’
    とエラー出力されてしまうようです。

  26. 返信遅れてごめんなさい。
    エラーメッセージ的には、プラグインにバグがあると言うよりは、このプラグインの読み込み自体に失敗しているようです。プラグインが正しく設置されているかご確認下さい。

  27. 縦スクロールバーを表の外に表示したいのですが
    できますか

  28. 現状の機能としてスクロールバーの位置を調整する機能は持っていませんが、OS やブラウザによってはそのような挙動になる事もあります。なので、一概にどうというのは言えないのですが、その辺りを調整したい場合、table を囲う div の横幅を計算している辺りを調整すると、お望みの挙動になるかと思います。

  29. 初めまして。
    シンプルなプラグインを有難うございます。
    fixRowsとfixCols両方指定した際に横スクロールしますと、スクロール最後の方でヘッダー固定部分と下部分に右部分のスクロールの幅程のズレができてきまうのですが、こちらは仕様でしょうか。
    また、解決策がありましたら教えていただければと思います。

  30. スッキリとテーブルの明細スクロールが実現できて嬉しいです!

    ここまで簡単に、明細スクロールが出来てると、もう1つ機能追加を期待してしまうのですが、行フッター・列フッターを追加することは可能なのでしょうか?

  31. >sukoさん
    その現象ですが、OS とブラウザの組み合わせによって発生しうるという事は分かっているのですが、プラグイン作成当初に調査したところ、簡単に直すのが難しくそのままになってしまっています。加えて、現在自分の手元にある環境では再現しないため修正する子が難しいので、仕様とさせて下さい。

    >ayuさん
    フッターの追加もやりようによっては可能かと思いますが、現時点でその予定はありません。現状のプラグインでは解決できないいくつかの問題があることが分かっているので、それらをまとめて解決する Ver.2 を作ることがあれば、その時にあわせて検討したいと思います。

  32. 素晴らしいプラグインを公開していただき、ありがとうございます。
    私もヘッダとボディが横スクロールでずれることに悩んでいたのですが、102行目あたりに次のコードを入れて対応しました。

    var scrollMargin = bodyDiv.width() – bodyDiv.get(0).clientWidth;
    bodyDiv.width(bodyDiv.width() + scrollMargin);

    ご参考までに。

  33. すみません、上の方法だと横スクロールバーが出ていないときにずれてしまいます。
    条件分岐を入れました。

    var scrollMargin = bodyDiv.width() – bodyDiv.get(0).clientWidth;
    if (withWidth) {
    bodyDiv.width(bodyDiv.width() + scrollMargin);
    }

  34. (タグ部分が消されてしまったので除いて再投稿、可能であれば前のを削除してください。)

    スクリプトを使わせて頂いています。

    IE8で表示がくずれる現象が起きました。
    (列のみ固定を指定しているが、固定列が中央に表示され、文字も2重になる。FireFoxdでは問題なし)

    が、DOCTYPE宣言の変更で解決したのでTipsとして報告します。

    前)
    !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

    後)
    !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”

    常識なのかもしれませんが...同様の方もいるかもしれませんので。

  35. みなさま、このプラグインも作成からだいぶ経ってしまい、また色々と小さな問題がある中、解決策を提示して頂いて、ありがとうございます。
    プラグインを利用している方は、こちらのコメントも含めて参照頂けていると思うので、大変助かっています。

  36. tablefix.js内にコントロールを埋め込む方法について

    こちらの環境 ASP.NET(.NET Framework3.5) IE10

    コントロールの内容:
       crossTable(左上の固定領域)とColTable(左カラム固定領域)内
       に、チェックボックスを埋め込んでいる。
     
    対策前:
        何もせずに、tablefixを適用すると、チェックボックスのチェック
       動作は動く(checkChangedのイベントが上がる)が、チェック外
    し動作が動かない(checkchangedイベントが上がらない)

    対策内容:
       元のチェックボックスが4枚のテーブルにクローンされているため、誤動作していると考え、表に出てこないチェックボックスをDisableにした。以下に、Disble化のコードを示します。
    # ポイントは、crossTableは親テーブルなので、これをいじると、全テー#ブルに波及することです。

     var crossTable = baseTable.wrap(”);
    baseTable.attr(‘hidden’, true);
    crossTable.find(‘tr’).each(function(indexY) {
    if (indexY != 0) {
    var g = $(this).find(‘td:first’); // 先頭のセルを取得
    var h = g.find(‘:checkbox’);
    h.attr(‘disabled’, true);
    }
    });

    // 右上のヘッダ行固定部分
    var rowTable = baseTable.clone().wrap(”);
    rowTable.attr(‘id’, rowTable.attr(‘id’) + ‘_row’);
    rowTable.find(‘tr’).each(function(indexY) {
    var g = $(this).find(‘td:first’); // 先頭のセルを取得
    var h = g.find(‘:checkbox’);
    h.attr(‘disabled’, true);
    });

    // 左のカラム列固定部分
    var colTable = baseTable.clone().wrap(”);
    colTable.attr(‘id’, colTable.attr(‘id’) + ‘_col’);
    colTable.find(‘tr’).each(function(indexY) {
    if (indexY == 0) {
    var g = $(this).find(‘td:first’); // 先頭のセルを取得
    var h = g.find(‘:checkbox’);
    h.attr(‘disabled’, true);
    } else {
    var g = $(this).find(‘td:first’); // 先頭のセルを取得
    var h = g.find(‘:checkbox’);
    h.attr(‘disabled’, false);
    }
    });

    // 右下の本体部分
    var bodyTable = baseTable.clone().wrap(”);
    bodyTable.attr(‘id’, bodyTable.attr(‘id’) + ‘_body’);
    bodyTable.find(‘tr’).each(function(indexY) {
    var g = $(this).find(‘td:first’); // 先頭のセルを取得
    var h = g.find(‘:checkbox’);
    h.attr(‘disabled’, true);
    });

  37. 1点ご質問です。

    widthやheightを%指定するなどして、表全体の幅や高さを、ウィンドウサイズによって可変にしたいのですが可能ですか?
    各行の高さや列の幅は固定にしたままです。

    なので枠だけが大きくなり、大きくなった分、枠内に最初に見えている行や列の数が多くなるといった仕様にしたいのです。

    お願します。

  38. ページをロードした後に、ウィンドウサイズに合わせて動的にサイズを指定してプラグインを初期化すれば、任意のサイズで表をスクロール可能に出来るかと思います。
    ただいまの実装で言うと、プラグインを初期化した後にさらにサイズ変更するのは難しいです。

  39. 参考にさせて頂いております。
    構築環境が悪いせいか、こんな症状が起きます。
    【開発環境】
     ASP.NET(.NET Framework2.0) IE8(未だにこんな環境)

    縦横スクロール固定については問題なく動作。
    ただし、スクロールするまでもないデータ件数
    (1件とか2件とか)で表示する際、明細行が長くなる現象あり。
    ASP.NET側のGridView.RowStyle.CssClassにはCSSファイルより
    height指定をしています。既知の問題でしょうか?

  40. この jQuery プラグインは、HTML / CSS / JS の組み合わせで動作しているもので、サーバサイドのフレームワークには特に影響を受けません。ASP.NET については、ほぼ知識が無いので分かりませんが、問題になるとすれば、最終的に生成されている HTML / CSS がどういう形になっているか、という点のみについてです。
    ですので、HTML / CSS の内容としてご質問頂ければ、何か分かるかも知れませんが、現在頂いている情報では特に何も分からないというのが正直なところです。

  41. 自己レスです。
    お騒がして恐縮ですが「解決」しました。

    恐らくですが、最終的に表示対象となるTableの外側は{crosDiv,rowDiv,colDiv,bodyDiv}で決まっているので、内側のTableの高さをautoにしてみたら上手くいきました。

    crossTable.css({ height: ‘auto’, overflow: ‘hidden’ });
    bodyTable.css({ height: ‘auto’, overflow: ‘hidden’ });
    rowTable.css({ height: ‘auto’, overflow: ‘hidden’ });
    colTable.css({ height: ‘auto’, overflow: ‘hidden’ });
    //(IE8環境しか確かめていませんが…)

    ちなみにclone内容からcrossTable以外のinputエレメントをまとめてremoveしてASP.netではID重複対策にも成功しました。

    Otchyさんのオリジナル&HTML/CSSベースのみで、これから動作検証を予定しています。
    追って結果をアップしたいと考えております。

  42. たびたび失礼します。
    先述の件、Otchyさんのオリジナル&HTML/CSSにて検証しました。
    …結果としては、そもそもGird内のデータ件数が少ない場合についても行高さが広がる症状は発生しませんでした。。。(^^;)

    という事は、ASP.net(AJAXを使用しているのでそれかも?)に起因している可能性もあると思います。したがって、ここでは以上とさせて頂きます。
    いずれにしても、非常に有意義なプラグインでしたので、今後とも参考にさせて頂くつもりです。ありがとうございました。

  43. 素晴らしいプラグインありがとうございます。

    一点ご質問させて頂きたいのですが、
    現在テーブルの左側で固定をしておりまして、スクロールで綺麗に固定しながら
    移動しておりますが、ボタンを設置してクリックすると一番右端に
    移動するような動作を実現することは可能でしょうか。

    ご返信お待ちしております。

  44. 固定部分と、メインの表示部分で、それぞれ別の div が動作しており、固定部分の div については、メイン部分の div のスクロールを追随するように動作するので、ボタンをクリックした際に、メイン部分の div を自動的にスクロールするように書いてあげれば、上手く動作するのではないかなと思います。
    もしそれでダメなら、固定部分の div のスクロールも一緒に書いてあげれば問題ないはずです。

  45. プラグイン利用させていただいています。
    IE8で利用しているのですが、
    ページ内検索した場合に、
    固定されているヘッダー部分がスクロールされてしまうのを防ぐために、
    下記のコードを追加しました。
    参考までに。

    ——————————————————-
    // 予期せぬスクロール対策
    // ※tab移動やページ内検索等で本来スクロールされないヘッダー部分が強制的にスクロールされるのを防ぐ
    crossDiv.scroll(function () {
    crossDiv.scrollTop(0);
    crossDiv.scrollLeft(0);
    });
    rowDiv.scroll(function () {
    rowDiv.scrollTop(0);
    rowDiv.scrollLeft(bodyDiv.scrollLeft());
    });
    colDiv.scroll(function () {
    colDiv.scrollTop(bodyDiv.scrollTop());
    colDiv.scrollLeft(0);
    });
    ———————————————–

    スクロールで移動してしまった場合に、
    本来の位置に再スクロールさせる処理となります。

    スクロールイベント自体キャンセルしようと、
    preventDefault()など試しましたが、キャンセルできませんでした。

  46. いまさらでございますが、本スクリプトを利用いたしまして、冊子時刻表のようなフォーマットで列車時刻を表示するサイトを運営しております。
    http://www.north-tt.com/00_timetable/hokkaido-tt.php

    いくつか修正の上で使用しておりますが、もうサイト作成から数年(2012年頃に作成し、データだけが再審になっております)経ちますが、重宝させていただいております。
    作者様には感謝しております。ありがとうございました。

  47. 素敵なプラグインを作成していただいてありがとうございます。
    他のプラグインはセルの結合に対応していなかったので、とても助かりました。
    最終コメントが1年前なので、お返事いただけるかわかりませんが、質問させてください。
    縦2列、横3列を固定してスクロールをさせることはできました。
    ヘッダー内の特定のセルにクリックイベントを使用したいのですが、イベントがとれません。
    こちら、有効にすることは可能でしょうか?

  48. 上記質問を取り消しいたします。こちらの問題でした。
    申し訳ございません。

コメントを残す

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