javascriptでソートが出来る表を作る

テーブルで作った表を降順・昇順で並べ替えたい時、Neil Fraserで公開されているTable Sorterを使用することでソートを簡単にできるます。
注意:日本語ではソートできない模様です。
   点数などの数値や、名前などをアルファベット表記にした項目を追加するなど工夫してください。

sponsors

使用方法

まずtablesort.jsをhead内に挿入します。
次に、以下のサンプルのようなテーブルで作った表の項目部分を<thead></thead>で囲みます。
また、各項目にはlabelとしてcase、nocase、numのいずれかを書き込む必要があります。
caseはアルファベットでの厳密な(?)ソート、nocaseは厳密でない(?)ソート、numは数値でのソート用です。
メインの表は<tbody></tbody>内に書き込みます。
例)サンプルで使用している</thead>部です。詳しくはソースをご覧下さい。
<thead>
<tr>
<th label=nocase>名前>/th>
<th label=nocase>性別>/th>
<th label=num>点数>/th>
<th label=case>HP>/th>
</tr>
</thead>
また表示される矢印と空白(↑'、 '↓'、' ')はオリジナル画像が使えます。
arrow-up.gif、arrow-down.gif、blank.gifの画像を作って以下のscriptを埋め込んでください。
<script type="text/javascript"><!--
TableSort.arrowNone = " <img height=10 width=10 src='blank.gif' alt=''>";
TableSort.arrowUp = " <img height=10 width=10 src='arrow-up.gif' alt='↑'>";
TableSort.arrowDown = " <img height=10 width=10 src='arrow-down.gif' alt='↓'>";
//--></script>

サンプル

名前 性別 点数 HP
Suzuki male 92点 Suzuki in Japan
Sato female 82点 Shall we dance?
Tanaka male 85点 N/A
Yamada male 42点 Fall in love

sponsors

Javascriptサンプルページ一覧
skuare.net