テーブルに実装できるjQueryプラグインいろいろ

スペックやデータ、料金表などを表示するためには、テーブルコーディングは欠かせませんね。

テーブルにjQueryのプラグインを実装すると、ソートやページングなどなど、様々な機能を追加する事ができます。

今回は、テーブルに実装できるjQueryプラグインいろいろとまとめてみました。

Flexigrid – Web 2.0 Javscript Grid for jQuery

カラムのリサイズやソート、ページングなどなど、たった数行のコードを追加するだけで、とってもフレキシブルなテーブルが完成します!

Flexigrid - Web 2.0 Javscript Grid for jQuery

Expand table rows with jQuery – jExpand plugin

折りたたみができるプラグインです。いろいろと使い道がありそうですね。

Expand table rows with jQuery - jExpand plugin

jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas

jQueryとHTML5をつかって、テーブルに入力された数値をグラフにビジュアライズしてくれます。テーブル内の数値はブラウザ上で変更する事も可能で、グラフも同時に変更されます。

jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas

jquery.csv2table.js

CSVファイルをテーブル表示してくれるjQueryのプラグイン。エクセルは使えるけど、HTMLはちょっと…。といったクライアントの方に重宝しそうなプラグインですね。

jquery.csv2table.js

jqGrid

ソートやページングなど様々な機能が実装できます。

jqGrid

Ingrid, the jQuery Datagrid.

こちらも同様に、ソートやページングなどのテーブル

Ingrid, the jQuery Datagrid.

jQuery plugin: Tablesorter 2.0

すっきりとしたデザインで見やすいソート機能

jQuery plugin: Tablesorter 2.0

jQuery treeTable 2.0

ツリー表示が実装できます。

jQuery treeTable 2.0

HeatColor, a jQuery plugin

とってもきれいなヒートカラーをテーブルに実装

HeatColor, a jQuery plugin

tableRowCheckboxToggle

テーブルの列ごとチェックボックスに反応させることができます。

tableRowCheckboxToggle

DataTables

こちらもソートやページングが実装できるjQueryプラグインです。

DataTables

TableEditor

編集可能なテーブルを作ることができます。

TableEditor

TinyTable JavaScript Table Sorter – 2.5KB

わずか2.5KBでソートやページング機能が実装できるプラグイン

TinyTable JavaScript Table Sorter – 2.5KB

tableFilter

カラムの上部に配置されているボックスに文字を入力して、絞り込むことができます。

tableFilter

jQuery Column Filters

こちらも、データを絞り込む事ができるフィルター機能

jQuery Column Filters

Allan Jardine | Reflections | KeyTable

タブキーでセルの選択を移動させることができます。

Allan Jardine | Reflections | KeyTable

Drag and drop table content with JavaScript

ドラッグ アンド ドロップが可能になります。

Drag and drop table content with JavaScript

Table Drag and Drop JQuery plugin

こちらもドラッグ アンド ドロップ可能になるjQueryプラグインです。

Table Drag and Drop JQuery plugin

デザインblogランキング

コメント 6 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



6 Responses to “テーブルに実装できるjQueryプラグインいろいろ”

  1. テーブルに実装できるjQueryプラグインいろいろ | DesignWalker « とっても! ちゅどん(雑記帳) Says:

    […] テーブルに実装できるjQueryプラグインいろいろ | DesignWalker テーブルに実装できるjQueryプラグインいろいろ | DesignWalker […]

  2. テーブルに実装できるjQueryプラグインいろいろ | DesignWalker | 自動更新ブログ Says:

    […] Posted by admin on 9/15/09 • Categorized as hatena テーブルに実装できるjQueryプラグインいろいろ | DesignWalker […]

  3. テーブルに実装できるjQueryプラグインいろいろ | DesignWalker | 次なるもの Says:

    […] テーブルに実装できるjQueryプラグインいろいろ | DesignWalker スペックやデータ、料金表などを表示するためには、テーブルコーディングは 欠かせませんね。テーブルにjQueryのプラグインを実装すると、ソートやページ ングなどなど、様々な機能を追加する事ができます。今回は、テーブルに実装で きるjQueryプラグインいろいろとまとめてみました。Flexigrid – Web… original article […]

  4. links for 2009-09-16 « Webデザインのリンク集 Webデザインポータルサイト S5-Style Says:

    […] テーブルに実装できるjQueryプラグインいろいろ | DesignWalker […]

  5. テーブルに実装できるjQueryプラグインいろいろ | WEB制作.Hack Says:

    […] テーブルに実装できるjQueryプラグインいろいろ 10月 2 Photoshop […]

  6. Daily Digest for 20091127 – lifestream@add Says:

    […] テーブルに実装できるjQueryプラグインいろいろ | DesignWalker […]

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ