Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

仕事にて、tableをソートするJavascriptを作ることになったわけですが... たまたま拾ったサンプルがバリバリのDOMだったおかげで、「Javascriptにおけるオブジェクト指向」がちょっとずつ解ってきました。それはともかく。

おっかなびっくり組んでみると、なんだかんだで、とりあえず動きはするんですが... どうにもappendChild()でノードが追加されるというよりは置換されてるっぽい理屈に確信が持てません。「そういうプロパティなんだ」と言われれば、それまでなんですが。

2008-12-23: 完全オリジナルで作り直しました。

ソースは以下

HTML

1. <table border="1" width="580" cellspacing="0" class="cols">
2. <tbody>
3. <tr>
4. <th onClick="sortRow(this,0);">グループ名</th>
5. <th onClick="sortRow(this,1);">今日</th>
6. <th onClick="sortRow(this,2);">昨日</th>
7. <th onClick="sortRow(this,4);">先週</th>
8. </tr>
9. <tr>
10. <td>100</td>
11. <td>200</td>
12. <td>300</td>
13. <td>400</td>
14. <td>500</td>
15. </tr>
16. <tr>
17. <td>200</td>
18. <td>300</td>
19. <td>400</td>
20. <td>500</td>
21. <td>600</td>
22. </tr>
23. ...
24. </tbody>
25. </table>

Script

1. var last_sort;
2.  
3. function sortRow(th,idx) {
4.  
5. // tbodyを特定する
6. var sec = th.parentNode.parentNode;
7.  
8. // trを特定する
9. var rows = sec.rows;
10. var N = rows.length - 1;
11.  
12. // 配列xを宣言
13. var x = new Array;
14.  
15. // 一時領域を定義
16. var marker = document.createElement('tbody');
17.  
18. // tdの値を配列xに格納。行番号を揃えた変数を用意する
19. for(var i=0; i<N; ++i) {
20. x[i] = Object(rows[i+1].cells[idx].firstChild.nodeValue);
21. x[i].row = rows[i+1];
22. }
23.  
24. // 配列xをソート
25. x.sort();
26.  
27. // 配列を逆順にする
28. if(last_sort == idx) {
29. x.reverse();
30. idx = -idx;
31. }
32.  
33. // secをmarkerにする
34. sec.parentNode.replaceChild(marker,sec);
35.  
36. // secにtrを追加する
37. for(var i=0; i<N; ++i) {
38. sec.appendChild(x[i].row);
39. }
40.  
41. // markerをsecにする
42. marker.parentNode.replaceChild(sec,marker);
43.  
44. // ソート情報を保存
45. last_sort = idx;
46.  
47. }

今後の課題

• table内をtbodyで満たしている（thead使いたい）
• ソートが甘い（ソート関数ちゃんと作らないと？）
• クリックポイントの体裁（thの上でカーソル変えるとか）
• th[0]だと連続で2回までしかソート変更できない

要するにサンプルコピったは良いけど、イマイチ改造できないと。なんとなく手ごたえはあるんだけど、あと一歩のとこで脳がJSモードに入ってないなぁ（汗

cf. Mata's Homepage, JavaScript テーブルソート