テーブルのヘッダと左列を固定するプラグイン

fixedTblHdrLftColというjQueryプラグインを作りました。 これは、テーブルのヘッダ(THEAD要素)と左列(固定するTD要素数を指定)を固定します。

仕様

  • jQuery v2.1.1+
  • ヘッダはTHEAD要素内、内容はTBODY要素内。

設定

https://raw.github.com/nkmrshn/fixedTblHdrLftCol/master/samples/sample1.png

Option 1 Option 2 Option 3 既定値 データ型 備考
scroll {} height null String スクロール領域の高さ
width null String スクロール領域の幅
headRow {} className 'fTHLC-head-row' String 固定したTH要素のクラス名
enabled true Boolean スクロールイベントの有効・無効
overflow 'auto' String CSSのoverflowプロパティ
leftCol {} className 'fTHLC-left-col' String 固定したTD要素のクラス名
enabled true Boolean スクロールイベントの有効・無効
overflow 'auto' String CSSのoverflowプロパティ
fixedSpan 1 Number 固定する左列の数
syncWith null String 同期するテーブルのjQueryセレクタ
wrapper {} outer {} idName null String 外側DIV要素のID名
className 'fTHLC-outer-wrapper' String 外側DIV要素のクラス名
inner {} idName null String 内側DIV要素のID名
className 'fTHLC-inner-wrapper' String 内側DIV要素のクラス名
corner {} append true Boolean 左上の角を追加
deepClone false Boolean ディープクローンする
outer {} idName null String 外側DIV要素のID名
className 'fTHLC-outer-corner' String 外側DIV要素のクラス名
inner {} idName null String 内側DIV要素のID名
className 'fTHLC-inner-corner' String 内側DIV要素のクラス名
左上の角

corner.appendedオプションをfalseに設定して、テーブルをスクロールさせると、左上の角がこのようになります。

https://raw.github.com/nkmrshn/fixedTblHdrLftCol/master/samples/sample2.png

このオプションがtrueの場合、プラグインは自動的に左上の角をクローンして、テーブルの最上に追加します。もし、このプラグインでテーブルを設定する前に、この部分にイベントハンドラをバインドしている場合は、corner.deepCloneオプションにtrueを設定してください。

スクロールイベントの同期

スクロールイベントを同期したいテーブルが2つ以上ある場合、scroll.syncWithオプションにjQueryセレクタを設定してください。

ウェブブラウザ

動作を確認したブラウザの一覧です。

未対応

COLSPAN属性やROWSPAN属性には対応していません。

サンプル

HTML5/CSS3で書いています。jQuery CDNYUI CSS Reset CDNを使っています。

  1. Basic
  2. Multi-fixed 1
  3. Multi-fixed 2
  4. Syncronize scroll events

ライセンス

MIT licenceでリリースしました。

余談

GitHubで公開し、jQuery Plugin Registryに登録したのは、20日以上も前の事なのですが、やっと記事を追加できる時間ができたので、READMEの日本語版を書いてみました。