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. EZ Plus

    JavaScript

    タッチにも対応した画像ズーム機能を実装できるjQueryプラグイン「EZ Plus」

    EZ Plusはタッチにも対応した画像ズーム機能を実装することができる…

  2. Animated Page Transition
  3. no-image
  4. Wallpaper

    JavaScript

    背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」

    WallpaperというjQueryプラグインを使えば背景画像のレイア…

  5. TyperText

    JavaScript

    テキストタイピングエフェクトを実装できる「TyperText」

    TyperTextはテキストタイピングエフェクトを実装できるjQuer…

  6. jQuery Reel Plugin

    JavaScript

    上下左右の色んな角度から画像を回転させて見せることができる「jQuery Reel Plugin」

    これは面白いですね。画像を上下左右と色んな角度から回転させながら見るこ…

最近の記事

  1. 200-DGCAM019
  2. ハクバ GW-PRO RED フォトグローブプロ PL
  3. Soundcore Liberty Air 2
  4. Soundcore Liberty 2
  5. マザーツリー

アーカイブ

PAGE TOP