スポンサードリンク


テーブルのヘッダー固定化スクリプト!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専門ブログで、お得な情報を紹介しています。 趣味はホームページ制作かな。起業を夢見て奮闘中の毎日!

      スポンサードリンク


      コメントを残す




      *

      このページの先頭へ