JavaScriptによる表のソート機能付与

質問

avaScriptでソートに関する質問です。jQueryを使って簡潔な記述で実現したいのですが、tablesoterなどのプラグインは使用不可の条件で、Tableのデータを並び替える方法がなかなか見いだせません。例えば、以下のようなTableにソート機能を持たせるにはどのようなJavaScriptの記述が考えられるでしょうか？
<thead>の<img>の一方をクリックしたら昇順、もう一方をクリックしたら降順にしたいです。押された場所の項目に応じてそのように並び替えをしたいです。なお、ソートは<tbody>の部分のみでOKです。

<table>
<thead>
<tr>
<th>年月<img src="01.gif"> <img src="02.gif"></th>
<th>更新数<img src="01.gif"> <img src="02.gif"></th>
<th>聴取率<img src="01.gif"> <img src="02.gif"></th>
<th>平均金額<img src="01.gif"> <img src="02.gif"></th>
<th>滞在時間<img src="01.gif"> <img src="02.gif"></th>
</tr>
</thead>

<tbody>
<tr>
<td>2010年08月</td>
<td>0</td>
<td>22%</td>
<td>30円</td>
<td>0</td>
</tr>

<tr>
<td>2010年07月</td>
<td>2</td>
<td>100.00%</td>
<td>180円</td>
<td>27日 +05:17</td>
</tr>

<tr>
<td>2010年09月</td>
<td>2</td>
<td>100.00%</td>
<td>190円</td>
<td>27日 +05:17</td>
</tr>
</tbody>

<tfoot>
<tr>
<td>合計</td>
<td >2</td>
<td>21.25%</td>
<td>400円</td>
<td>57日 +12:10</td>
</tr>
</tfoot>
</table>

以上です。HTMLをいじるのはありです。
どうかよろしくお願い致します。

回答No.1

fujillin

＞機能を持たせるにはどのようなJavaScriptの記述が考えられるでしょうか？

記述の一例として…

* そのまま文字列のソートにしているので、数値で比較する場合は数値に変換する必要あり。
* tableを特定する必要がある場合は、セレクタ部分を変えてください。
* ＨＴＭＬはご提示のままです。
* ごく簡単な原型みたいなものなので、必要に応じて修正してください。
（全角空白は半角に）

$(function(){
　$("thead th img").click(function(){
//準備処理
　　var i, temp = [];
　　var th = $(this).parent();
　　var tb = $("tbody");
　　var order = $("img", th).index($(this));
　　var column = th.parent().children().index(th);

　　column = ":eq(" + column + ")";

//対象列をコピー
　　$("tr", tb).each(function(i){
　　　temp[i] = [$(this).children("td" + column).text(), $(this)];
　　});

//コピーを並べ替え
　　temp.sort();
　　if(order) temp.reverse();

//結果を反映
　　for(i=0; i<temp.length; i++) temp[i][1].appendTo(tb);
　});
});