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>