社内システムではテーブルがよく使われます。レポートも同様です。そんな一覧データを並び替えたいと思ったり、加工したいと考えるときは多いはずです。プログラマーが機能実装してくれれば良いですが、それが臨めないならTableTools2で独自に拡張してしまいましょう！ 配布はAdd-ons for Firefoxにて行っています。 インストールします。インストール後、一度再起動が必要です。 任意のテーブルでコンテクストメニューが表示されます。 テーブルのデータを使ってグラフを描くことができます。 棒グラフなど、複数のグラフに対応しています。 検索フィルタをつけたりできます。 列を消したり、テーブルの結合や比較もできます。 TableTools2ではテーブルを解析するため、theadやtbodyできちんとテーブルが表現されている必要があります。またソートは日付や数値、英語名などが対応しているので日本

List.js - Examples of how to use the script リストを検索＆ソートできる7KBのJavaScriptライブラリ「List.js」。 <li>リストを入力によって絞り込んだり、分類別で絞り込んだり、特定属性でソートするなんていうことが可能です。 7KBと軽く、サクサク動きます。サーバサイドでアイテムを絞り込む方法もありますが、アイテム数がそこまで多くなければこうしたものでしぼり込むことで、サクサク動作してユーザ体験も向上して作り手としてもサーバ負荷を減らすといったことができそうです。 テーブルベースのデータもフィルタリング可能です。 jQueryプラグイン程使い勝手がいいわけではありませんが、ライブラリ非依存で使えるのもメリットかも。 関連エントリ 郵便番号等からリアルタイムに地図をサジェストできる「Mapeed.AddressChooser」 Fa

テーブルのカラムをドラッグ＆ドロップでリサイズできるようにする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

IE6などの非サポートブラウザも配慮した、角丸、ゼブラ柄、ハイライトなど美しくて分かりやすいテーブルを実装するCSS3のチュートリアルを紹介します。 デモページ:Zebra stripes, footer 角丸、セルを交互にカラーリング 実装のポイント CSS3を使って美しく、そして機能するテーブルを実装するポイントです。 画像を使用しないで、角丸を実装。 余分なid, classは使用せず、更新が容易。 ※tableにclassを一つだけ ユーザフレンドリーで、読むことが簡単。 実装 HTML HTMLは非常にシンプルです。 classは、tableタグにのみ使用します。 <table class="bordered"> <thead> <tr> <th>#</th> <th>IMDB Top 10 Movies</th> <th>Year</th> </tr> </thead> <tr

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」

既存のテーブルにも簡単に組み込める、テーブルに美しいフェードのアニメーションを伴ったページネーション機能を加えるjQueryのプラグインを紹介します。 Table Paginator デモ [ad#ad-2] デモはシンプルに実装されたテーブルの上にある「Click to Pagenate」をクリックすると、長いテーブルがページネーション付きのテーブルに変更されます。 テーブルの下部に配置されたナビゲーションをクリックすると、フェードのアニメーションで指定されたテーブルが表示されます。 美しいグラデショーンを伴ったフェードのアニメーション ※デモで実際のアニメーションをお楽しみください。 Table Paginatorの主な特徴 既存のテーブルにも簡単に実装できます。 美しいインターフェイスを提供します。 インターフェイスはjQuery UIのテーマを継承します。 アニメーションのスピード

OpenJSはテーブル表示をリッチなUIにし、並び替えや編集などの機能を追加するライブラリ。 OpenJSはjQuery/JavaScript製のオープンソース・ソフトウェア。企業システムはもちろん、Webサービスの管理画面などで求められるのがテーブルベースのデータ一覧表示機能だ。そしてテーブルを作るとソートやフィルタリング、その場での編集機能などが求められるようになる。 画像表示 そんな機能を作り込むのはとても大変だ。だがユーザの立場に立てば、一件ずつ編集するのも大変なことだろう。そこで外部ライブラリに頼ろう。OpenJSはとてもリッチな編集インタフェースを提供してくれる。 OpenJSは通常のテーブルタグで作られた表を、角丸でかなりリッチなUIにしてくれるライブラリだ。カラムで並び替えたり、画像のサムネイルを表示する、フィルタリングやページネーション機能もある。Ajaxでスムーズに操作

縦長テーブルをスクロール対応にするシンプルなjQueryプラグイン「Lightweight Scrollable Tables」 2011年05月17日- Lightweight Scrollable Tables | jQuery Plugins 縦長テーブルをスクロール対応にするシンプルなjQueryプラグイン「Lightweight Scrollable Tables」 $('table').scrollbarTable();のように呼び出すだけで簡単にスクロール化してくれます。 特に派手な演出はありませんが、シンプルで汎用的に使うことが出来ます。とかく長くなりがちなテーブルも１行で簡単にスクロール化できるというのは色々な場面で使えるでしょう。 $('table').scrollbarTable(100)のように引数を渡せば高さを100pxに指定出来ます。 デモページはこちら 関連エ