[JS]表組みのヘッダを固定し、表示する列も選択できるスクリプト
Post on:2010年6月17日
表組みのヘッダを固定表示し、データのみスクロール表示を可能にするスクリプトを紹介します。
Scrollable Fixed Header Table – A JQuery Plugin
デモページ
スクリプトの機能はヘッダの固定表示だけではなく、表示する列をユーザーが選択することもできます。
左上のアローをクリックすると、チェックボックスが表示されます。
スクリプトはクッキーにも対応しており、選択した列をクッキーに保存することも可能です。
スクリプトはjQueryのプラグインのため、実装にはjquery.jsが必要です。
オプションでは、テーブルの幅と高さ、列選択の有無、クッキーの有無を設定できます。基本の書式は下記のようになります。
JavaScript
1 2 3 |
<textarea name="code" class="js" cols="60" rows="5"> $(tableID).scrollableFixedHeaderTable(widthpx, heightpx, showSelect, cookie) </textarea> |
sponsors