category
サイト構築 -JavaScript

[JS]設置も簡単なテーブルのデータをソートする超軽量のスクリプト

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

leigeberから、既存のテーブルにも簡単に設置できる、データをソートする超軽量(1.7KB)のスクリプトを紹介します。
jQueryやPrototypeなど他のスクリプトは必要ありません。

デモのキャプチャ

JavaScript Table Sorter
demo

動作確認ブラウザは、IE 6/7/8, Fx2/3, Op, Safari, Chromeとなっています。

設置方法は簡単で、既存のものにも簡単に組み込めます。

  1. 「script.js」と「style.css」を外部ファイルとして記述します。
  2. tableに「class="sortable" id="sorter"」を記述します。
  3. テーブルの下に下記のスクリプトを記述します。

ソートを適用させたくない列には、「class="nosort"」を指定します。

追記:2009/02/10
下記のコメント欄にあるように、一部訂正があるようです。

Post on:2008年11月5日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

メシウマ状態 飯の旨いおかずがてんこ盛り
on 2008年11月8日

大前 研一「韓国はマジでやばいから日本を利用すべきw」

あとで新聞 - 2008年11月7日(金)から

404 Blog Not Found:惰訳 - Barack Obama’s acceptance speech in full
オバマ演説の和訳。朝日新聞、民主党、社民党がオバマのキーワード「Change」だけを抜き出して…

通りすがり
on 2009年2月10日

データにリンクがありエラーを吐く場合は、
script.jsファイル内

for(i=0;i<this.l;i++){
this.a[i].o=i+1; var v=this.r[i+1].cells[y].firstChild;
this.a[i].value=(v!=null)?v.nodeValue:"
}

これを

for(i=0;i<this.l;i++){
this.a[i].o=i+1;
var v=this.r[i+1].cells[y];
while(v.hasChildNodes())v=v.firstChild;
this.a[i].value=(v.nodeValue!=null)?v.nodeValue:"
}

に書き換えてください。
※配布先コメント
Martin on 21 Jan 2009 at 3:59 am
より翻訳

※記事に反映可能であればよろしくお願いします。

コリス
on 2009年2月10日

情報、ありがとうございました。

ページの先頭へ




© coliss

RSS