jTableScroll

JavaScript

ヘッダーとフッターを固定したままスクロール可能なテーブル「jTableScroll」

jTableScrollはヘッダーとフッターを固定したままスクロールをすることが可能なテーブルを実装することができるjQueryプラグインです。目的の値を見失うことなくチェックできるので、とても便利ですね。

jTableScroll

jTableScroll

縦や横にスクロールしても表示されている値に対応したヘッダーやフッターがちゃんと表示されます。これなら値がたくさん並んでいても安心して探すことができますね。

実際のマークアップはこんな感じでtheadにヘッダーを、tbodyにデータを、tfootにフッターを指定していきます。

<table id="tableToScroll">
    <thead>
        <tr>
            <th>ヘッダー1</th>
            <th>ヘッダー2</th>
            <th>ヘッダー3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>値1</td>
            <td>値2</td>
            <td>値3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>フッター1</td>
            <td>フッター2</td>
            <td>フッター3</td>
        </tr>
    </tfoot>
</table>

あとはjTableScrollをセッティングすればOKです。

<script src="jquery.jTableScroll-1.6.0.js"></script>
<script>
    $('#tableToScroll').jTableScroll(options);
</script>

使い方もシンプルだしオプションでwidth、height、backgroundcolorなどを設定することも可能です。

というわけで、ヘッダーとフッターを固定することができるテーブルを実装したい方は、是非jTableScrollを活用されてみてはいかがですか?

関連記事

  1. Jquery modal box plugin
  2. Random Quote Machine

    JavaScript

    ランダムにテキスト(クオート)を表示させる「Random Quote Machine」

    Random Quote Machineは、設定したデータのなかからラ…

  3. Animated Image Pieces

    JavaScript

    画像が細かいピースになるアニメーション実装「Animated Image Pieces」

    Animated Image Piecesは、画像が細かいピースに分解…

  4. parallax-background.js
  5. CurvedText

    JavaScript

    曲線上にテキストを配置できるjQueryプラグイン「CurvedText」

    CurvedTextというjQueryプラグインを使えば、任意の曲線上…

  6. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP