ParamQuery jQuery Grid Plugin 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 ありきたりなカッコいい、とはいえないような以下のテーブルがあったとします プラグインで初期化すれば、ソータブル、エディタブル、なクールなテーブルに早がわり これは5,6年前でいえば魔法だと思う方は少なくないでしょう。 関連エントリ レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」 テーブルをグラフに変換してくれるjQueryプラグイン レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table So

FooTable | Themergency レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 レスポンシブなWEBデザインを作る際に一番やっかいなのではというのが、テーブルですね。 折り返しが出来ないのでどうやってレイアウトしようと悩むところですが、画面が小さい時は主要な物を選んで出す、といった事ができます テーブルのth 要素で出す出さないの定義をすることができて、あとはプラグイン関数で初期化するだけというお手軽さです。 iPhone。主要な部分を見せつつ、折畳みで他の要素もみせるUI ちょっと画面の大きなタブレットでの画面。表示要素は多くなるけどまだ折畳みで他の要素をみせる状態 PCの大きなディスプレイですべて開いた状態 次のように、data-class、data-hide の属性を付けておくことで挙動をカスタマイズ可能です 関連エントリ WEBデザインす

A Responsive Design Approach for Complex, Multicolumn Data Tables | Filament Group, Inc., Boston, MA レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」 divなブロックだったら、幅を適切に設定しておいてあげれば丁度画面の端で折り返されるところですが、テーブルをレスポンシブにするには？ って考えた時に、「う〜ん、どうやろう」となってしまうと思います。そんな際は、重要なものだけに絞って表示しちゃいましょうというスタンスのプラグイン。 幅が狭くなったら９列あったものを３列にしちゃいます。かといって、見れなくなるのは困る、という場合もあるのですが、それも解決策として提案されています。 幅を狭めるとテーブルの表示項目が絞られて見やすいまま。 見たい項目がある場合は、プルダウン

jQuery Rain | jquery-handsontable @ GitHub 一見普通のテーブルだけどExcel風に使えるjQueryプラグイン「Handsontable」。 Excelのテーブル風ウィジェットは色々ありますがリッチすぎて重いようなものは使いづらかったりします。 今回紹介するjQueryプラグインを使えば、Ctrl+C,Vでコピペできたり、セルに内容を直接入れたりといったことができます。 シンプルなので超軽量 入力していくと自動でサイズが再調整されてどんどん入力できます 実装コード例。初期データはJSONで指定 onchangeでコールバック関数が指定できるので変更時にサーバにデータを投げて保存といったことが可能みたい 関連エントリ Excelそっくりな表計算モジュールを実装可能なオープンソースモジュール「Gelsheet」 WEBページにExcel風スプレッドシー

フォーム、テーブル、カレンダーなど、ウェブページで使用するUIエレメントに便利な機能を加えるjQueryのプラグインを紹介します。 minjs - Minimalist JavaScript [ad#ad-2] minjsは現在、3つのモジュールが公開されています。 minform longtable drcal minform HTML5のフォーム周りの便利な機能を非サポートブラウザでも利用できるようにします。 デモ ダウンロード minform -GitHub [ad#ad-2] minformの使い方 minformはスクリプトを外部ファイルとして記述するだけで、下記のフォーム関連の機能が非サポートブラウザでも利用できるようになります。 placeholders 入力欄にヒントのテキストを表示します。 autofocus 入力欄をフォーカスします。 required 必須入力の欄で、

テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 2012年05月08日- tablecloth.js テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 $('table').tablecloth() と記述で簡単にテーブルをカッコよくスタイリングできます。テーマも選べる模様。 ソート可能にしたり、ストライプなデザインにしたりといったカスタマイズも可能。 実装できるデザイン例。Twitter Bootstrap と組み合わせたテーマ２種類とその他２種類のテーマがデモとして表示されています 意外と手間取るテーブルデザインですが、こうしたものを参考に美しくデザインしたいものですね 関連エントリ CSS3でクールな角丸テーブルを作る例 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイ

List.jsはリストやテーブルを検索やソート可能にするJavaScriptライブラリです。 HTMLではよくリスト表示やテーブル表示を行います。一旦表示したデータを並べ替えたり絞り込んだりできる便利なライブラリがList.jsです。 基本のサンプルです。データがリストになって並んでいるのが分かるかと思います。 名前でソートしました。 カテゴリで絞り込んで表示しています。 検索です。インクリメンタルに絞り込まれます。 こちらはテーブルのサンプル。行ごとに削除、編集が出来ます。 曖昧検索です。多少文字が違っていても絞り込んでくれます。 データを動的に生成するサンプルです。1,000行程度であれば77msで生成できます。 検索です。こちらは12ms。高速です。 List.jsはデータをJSONで渡すことも、素のHTMLを対応させることもできます。検索で絞り込んだりデータを追加、編集するのも容易

jQuery Table Sort | The Stupid Table Plugin by JoeQuery シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table Sort」 リッチなUIにするわけでもなく、ただヘッダーをクリックすると内容がソートされる機能を実現するためのプラグインです。 自分でテーブルをデザインしたい方には使い勝手が良いだけでなく超軽量なのもいいです クリックでソート↓ 使い方もライブラリを読み込んだら１行でOKです 関連エントリ アイテムを浮遊させられるjQueryプラグイン「jqFloat」 リアルなドラッグ＆ドロップが実現できるjQueryプラグイン「pep.jquery.js」 コンテンツの折りたたみを楽々実装できるjQueryプラグイン「jQuery Collapse」 ページ全体に広がるスライドショーを実装できるj

jTable.org - A JQuery plugin to create AJAX based CRUD tables - Home Page データベース連動型のAjaxを使ったテーブル実装jQueryプラグイン「jTable」 CRUDの操作が可能でその場で編集、削除といった作業ができるのは便利です 画面遷移なしに編集が可能 削除の場合、確認ダイアログが出て削除可能 お手軽になりますが、使い所によっては危険なので慎重に使いたい所ですね 関連エントリ 長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」 テーブルのカラムをドラッグ＆ドロップでリサイズできるようにするjQueryプラグイン「colResizable」 階層構造が作れるテーブルを実現できるjQueryプラグイン「treeTable」 テーブルをちょっとだけ使いやすくして

WEBページにExcel風スプレッドシートを設置できるウィジェットライブラリ「dhtmlxSpreadsheet」 2011年12月12日- Web-Based JavaScript Spreadsheet Software - dhtmlxSpreadsheet WEBページにExcel風スプレッドシートを設置できるウィジェットライブラリ「dhtmlxSpreadsheet」。 次のような綺麗なデザインのテーブルを簡単に配置できます。PHPとJavaScriptで書かれていて、データなんかも自分のサーバ上においておけるのが特徴 データベースからのバインディングができたり、PDFやExcel形式でのエクスポートに対応しています。 WordPressプラグインもあるみたいなのでWordPressな方にも使いやすい 色を変えたりSUMしたりと多機能。 関連エントリ これは凄い、Excelの関数

テーブルのカラムをドラッグ＆ドロップでリサイズできるようにするjQueryプラグイン「colResizable」 2011年11月08日- colResizable ? jQuery plugin テーブルのカラムをドラッグ＆ドロップでリサイズできるようにするjQueryプラグイン「colResizable」 OSのインタフェースなんかではドラッグ＆ドロップで当たり前のようにリサイズできますが、WEBのテーブルは出来ませんね。 でもこのプラグインを使えば $("table").colResizable(); のように初期化しちゃってリサイズできます。 ドラッグ＆ドロップで以下のようにカラムをリサイズ 分かりやすいようにつまみをつけたりすることも出来ます。 テーブルだけではなくて、次のようなインタフェースを実装するのにも使えます。 次のように食事バランスを分類するようなインタフェースとしても

NeoAlchemy Table Pagination 長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」 縦に長かったりするとテーブルは読みにくかったりしますが、このプラグインで初期化してしまえば一瞬でページ分けが完了します ページングするコードは次のように書けばOKです テーブル自体はそのままHTMLを書いておけばいいので楽チンですね。 関連エントリ Twitter OAuth認証をポップアップで行うjQueryプラグイン リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 中身が画像のselectボックスを作るjQueryプラグイン

jQueryでテーブル（table要素）に行を追加する方法を紹介します。 テーブル操作は、テーブル系のjQueryプラグインで色々なことが実現できると思いますが、業務で使っているツールでこの機能がピンポイントで必要になったため自力で作りました。 単に追加するだけであれば後述するappend()とprepend()で大丈夫です。ただアニメーション表示する方法についてはネットで色々探しましたが同様の情報がなかったので試行錯誤して作りました。テーブルを操作する場合の参考になれば幸いです。 １．サンプル まずはサンプルで動作をご確認ください。 jQueryでtableに行を追加するサンプル サンプルでは行の追加・削除・全削除が行えます。 ２．テーブルの先頭に行を追加する 行をtable要素の先頭に追加するには次のように記述します。 $('tbody').prepend('<tr><td>～</td

jQuery.sheetはjQueryで作られたWebベースの表計算ソフトウェアです。 業務システムなどではWeb上にテーブルを表示するというケースがよくあります。さらに一歩進んで表計算のように集計したり並び替えたりしたいという無茶な要望が出るかも知れません。そんな時に使ってみたいのがjQuery.sheetです。jQuery製の表計算ソフトウェアです。 カラムはもちろん、グラフの表示までできてしまう本格的な表計算ソフトウェアです。 最大化表示。セルの値を参照することもできます。 テキストだけではなくラジオボタン等も使えます。 関数も多彩に用意されています。 編集しているところ。 文字装飾を変更します。メニューから選択できます。 HYPERLINKはその名の通りリンクを埋め込みます。 データにはHTML/XML/JSONが使えます。エクスポートも各フォーマット向けに可能です。 JavaSc

Making a table become selectable with rbTable テーブルをちょっとだけ使いやすくしてくれるjQueryプラグイン「rbTable」。 テーブルのセル上にカーソルがあうと色が変わって、クリックすると更に選択状態にできるというjQueryプラグインです。 沢山のデータをたどる上で、こういった機能はとても便利ですが通常のテーブルにはありませんね。 ちょっとした一手間で使いやすいテーブルにできるので覚えておいもよいかも。 CSSなどは自分で指定してデザインすることが出来るので、自分で好きなようにデザインすることができるはずです。 初期化には次のように、CSSのクラスを指定してあげるだけです $('.table').rbTable({row:"your_class", rowClick:"your_click_class"}); 関連エントリ 超カッコいい

jQuery treeTable Plugin Documentation 階層構造が作れるテーブルを実現できるjQueryプラグイン「treeTable」 次のようなエクスプローラ風の階層を持ったテーブルを作ることができます。 カラムも別れており、それぞれ情報を表示でき、階層の折りたたみもできます。 テーブルを決められたルールに従って定義したら、$(element).treeTable();として初期化するだけです。 シンプルですがなかなか使えそうです 関連エントリ ヘッダ固定の分かりやすいテーブルを簡単実装できるjQueryプラグイン「jQuery.FixedTable」 縦長テーブルをスクロール対応にするシンプルなjQueryプラグイン「Lightweight Scrollable Tables」