スポンサードリンク


テーブルのヘッダー固定化スクリプト!tableタグ複数行をスクロール対応する方法!jQueryプラグインFixed_midashiで簡単に実現!

HTMLでテーブルを使う時で行数が多いとページング機能を実装したり、
スクロールできるようにすると思います。

JavaScriptでajaxを利用すれば、ページング機能を搭載することもできるので、
それほど苦労しませんが、問題はスクロール仕様を実装するときです。

単にheightを固定値に指定するだけでは、thなどの表の見出し部分まででスクロールされてしまいますよね。

こういう場合、特に行数が多い表って列名が隠れてしまうので、
何がどんな情報なのか分かりづらいくなってしまいます。

なので、表のヘッダ行を固定化させたいと思い、各種プラグインを使用したり、
自分で作成したりしましたが、どうも使いにくいのです。

というのは、tableタグの記述の仕方によっては動かない場合もあり、
すべてのtableタグを共通の記述にしないといけないという点で困っていました。

できれば、固定化させる部分だけ指定できたらいいものですが・・・。

なんて探っていたら素晴らしいスクリプトに出会えました!

 

Fixed_midashi.jsで簡単に表のヘッダを固定!

正直これはかなり使えると思います。

Fixed_midashiというJavaScriptのライブラリです。
このライブラリを読み込ませて、表内のtableタグに属性値を指定するだけで、
簡単にヘッダを固定することができました。

ものすごく使いやすい上に、汎用性が高く、
他のブラウザでも正常に動作するので一番おすすめですね。

仕組みとしては、表内のtrタグを自動判別してヘッダを固定化するため、
tableタグの記述の違いによる影響を受けにくいのです。

さらに素晴らしい点は、なんと複数行固定化することができます。

 

Fixed_midashiの使い方!

まずはプラグイン「Fixed_midashi」をダウンロードし入手します。

このプラグインのJSファイルを表のヘッダを固定化させたいページに記述します。

以下はサンプルソースですが、こんな感じに記述します。

3行目にダウンロードしたプラグインをheadタグの領域内に指定します。

次に5行目にbodyタグの属性にonLoadを追加し、FixedMidashi.create()メソッドを指定します。
これは、ページ読み込み後に上記のメソッドを実行するというものです。

あとは8行目でtableタグの属性に「_fixedhead=”rows:1; cols:1″」を追加します。
この属性値が、表のヘッダを固定化するための記述になります。

ちなみに複数行固定化させたい場合は、例えば2行なら「_fixedhead=”rows:2; cols:1″」。
tableタグを上から見て指定したrowsの値の分だけのtrタグの範囲を固定化できますよ。

上記のソースですが、tableタグを囲んでいるタグはスクロールを実装するために敢えて追加したものです。

 

スポンサードリンク

 

注意点は、tableタグのwidthを指定しないと、ヘッダ固定のスクリプトが働いたときに、
表示範囲外までヘッダ部が飛び出してしまいます。widthは可変値、固定値問わず指定しておきましょう。

 

表のヘッダ固定化のサンプル

A列B列C列
値1値2値3
値4値5値6
値7値8値9
値10値11値12
値13値14値15
値16値17値18
値19値20値21
値22値23値24
The following two tabs change content below.
よっき
パソコンが大好きな青年。職業はプログラマ。 幼少期からパソコンが好きで、趣味がそのまま仕事になりました。 主にウェブ系コンテンツの開発が中心です。 自作PCの魅力に惹かれたのは学生時代の頃で、現在に至ります。 自作PC専門ブログで、お得な情報を紹介しています。 趣味はホームページ制作かな。起業を夢見て奮闘中の毎日!

スポンサードリンク


コメントを残す




*

このページの先頭へ