DOM(Document Object Model)を用いて、テーブルをソートする方法を紹介します。IE6.0(Win)、Netscape 6.1(Win)での動作を確認しています。
数値が文字列順に並ぶ(1, 200, 30, 400 の順になってしまう)不具合を修正しました。また、Netscape 7.01(Win/Linux)、Opera 7β(Win)での動作確認情報をいただきました。(2003.2.2)
Cyndy | 48 |
Daisy | 24 |
Alice | 36 |
Ellen | 18 |
Barbara | 52 |
<script type="text/javascript"> <!-- var oTRs; // TRオブジェクトリスト var nColId; // ソート対象のカラムID var sType; // ソート方式(n:数値、s:文字列) // idで指定されるテーブルの colId番目のカラムをソートする // typeには n(数値)か s(文字列)のいずれかを指定する function SortTable(id, colId, type) { var i, nRow, nCol; var oTABLE, oTBODY, oTDs; var aCells = new Array(); var nRowIDs = new Array(); // DOMをサポートしていなければ無視 if (!document.getElementById) { return; } // カラム番号とソート方式を外部変数に覚えておく nColId = colId; sType = type; // TR要素のリストを取り出す oTABLE = document.getElementById(id); oTBODY = oTABLE.getElementsByTagName("TBODY")[0]; oTRs = oTBODY.getElementsByTagName("TR"); // テーブルの内容を覚えておく for (nRow = 0; nRow < oTRs.length; nRow++) { nRowIDs[nRow] = nRow; oTDs = oTRs[nRow].getElementsByTagName("*"); aCells[nRow] = new Array(); for (nCol = 0; nCol < oTDs.length; nCol++) { aCells[nRow][nCol] = oTDs[nCol].firstChild.nodeValue; } } // ソートする nRowIDs.sort(CompareRows); // 覚えていた内容をテーブルに書き戻す for (nRow = 0; nRow < oTRs.length; nRow++) { oTDs = oTRs[nRow].getElementsByTagName("*"); for (nCol = 0; nCol < oTDs.length; nCol++) { oTDs[nCol].firstChild.nodeValue = aCells[nRowIDs[nRow]][nCol]; } } } // テーブルソートのための比較関数 function CompareRows(a, b) { var sA = oTRs[a].getElementsByTagName("*")[nColId].firstChild.nodeValue; var sB = oTRs[b].getElementsByTagName("*")[nColId].firstChild.nodeValue; if (sType == "n") { sA = eval(sA); sB = eval(sB); } if (sA == sB) { return 0; } else if (sA > sB) { return 1; } else { return -1; } } // --> </script> <table border=1 id="tb1" width=200> <thead> <tr> <th><button onclick="SortTable('tb1', 0, 's')">名前</button></th> <th><button onclick="SortTable('tb1', 1, 'n')">年齢</button></th> </tr> </thead> <tbody> <tr><td>Cyndy</td><td>48</td></tr> <tr><td>Daisy</td><td>24</td></tr> <tr><td>Alice</td><td>36</td></tr> <tr><td>Ellen</td><td>18</td></tr> <tr><td>Barbara</td><td>52</td></tr> </tbody> </table>