[Javascript]テーブルにソート機能を簡単に追加 Table Sorter - MOMOYA.Labs // 桃屋ラボ
Webアプリケーション開発をしていて、後からソート機能を追加しようと思うと、結構面倒なものですね。 その面倒をJavascriptで解決できないかと考えて探して見つけたのが、この「Table sorter」です。 この「Table sorter」を使えば、少しのコードを追加するだけで、簡単にテーブルにソート機能を付加できます。 使うか否より、まず デモ をご覧ください。 「Table sorter」のダウンロードDownload からFull releaseの物をダウンロードできます。 要らないものは、個々消してください。(私は実装時に殆ど消し、CSSの内容も位置も変えましたけど。) ダウンロードしたファイルは、今回はサンプルとして [site_root]/js/tablesorter/ に解凍するとします。 「Table sorter」の使い方このスクリプトは設置がとても簡単です。 ・T
HWPS! » jquery-tablesorter でソート可能なテーブル
ソート可能なテーブルの実装が欲しかったので、jQuery のプラグイン(?)として実装されている tablesorter を試してみた。 サンプルとして三国志大戦3の武将データリスト。 jQuery および tablesorter を展開しておく。 まずテーブルを用意。ノードのオブジェクトを取得できるように id を振っておく（振らなくても取得できるけど）。 このとき thead および tbody をしっかり書く。あと class 名を tablesorter にしておくと添付のスタイルに適合できる。 <table id="maintable" class="tablesorter"> <thead> <tr><th>No</th><th>Score</th></tr> </thead> <tbody> <tr><td>1</td><td>70</td></tr> <tr><td>2</
指定した条件でテーブルの行を並び替える - tablesorter - Postal Search Ajax API with jQuery - Postal Search APIs & Solutions
1行間隔で行の背景色を変える widgets プロパティに zebra を指定すると、1行間隔でテーブル行の背景色を入れ替わり表示できます。 jQuery(function($) { $('#r4').tablesorter({ widgets: ['zebra'] }); }); //jQuery tr 要素のクラスに even と odd が交互に付与されるので、スタイルシートを使って even と odd の背景色を指定します。 table.tablesorter tbody tr.odd td { background-color:#F0F0F6; } # 都道府県 フリガナ ふりがな ローマ字
普通のtableタグを1行で動く表にするJSライブラリ (1/5)
大量の情報を分かりやすく一覧で見せたい。そんなときには、やはり「表（テーブル）」をうまく使いこなしたいもの。罫線やセルの色分け、文字サイズの調整などを調整して見やすくデザインすることはもちろんですが、同時に、ユーザーが求める情報を的確に、分かりやすく表示する仕掛けがあるといいでしょう。 ヤフーが運営する「Yahoo！不動産」は、ユーザーの操作によってテーブルを分かりやすく表示するユーザーインターフェイスが参考になるサイトです。単なる見た目の装飾ではなく、実際に使い勝手を向上させるためにAjaxを活用した好例と言えるでしょう。 今回は、このYahoo！不動産をお手本に、Webサイトのブラッシュアップに取り組みます。 今回のお手本サイト：『Yahoo！不動産』 ヤフーが運営する不動産総合情報サイト。日本全国の売買／賃貸物件の情報が大量に掲載されており、「写真掲載の有無」「部屋の広さ」といったさ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
