javascriptでソートが出来る表を作る
テーブルで作った表を降順・昇順で並べ替えたい時、Neil Fraserで公開されているTable Sorterを使用することでソートを簡単にできるます。
注意:日本語ではソートできない模様です。
点数などの数値や、名前などをアルファベット表記にした項目を追加するなど工夫してください。
使用方法
まず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>
サンプル
Javascriptサンプルページ一覧
skuare.net