skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

javascriptでソート出来る表を作る「Table Sorter」

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

使用方法
まずtablesort.jsをhead内に挿入します。
次に、テーブルで作った表の項目部分を<thead></thead>で囲みます。
また、各項目にはlabelとしてcase、nocase、numのいずれかを書き込む必要があります。
メインの表は<tbody></tbody>内に書き込みます。

また表示される矢印と空白（↑'、 '↓'、' '）はオリジナル画像が使えます。
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でソートが出来る表を作る紹介ページをご覧下さい。

記事作成：2007年06月27日

前の記事：SEOってどういう仕組み？
次の記事：WYSIWYGを可能にするjavascript「openWYSIWYG」