テーブルの並び替え

テーブルの中身を特定のセルの内容を参照して並び替えるJavascript。

弱点として、セル内がテキスト以外の場合にソート不可能だったのを、マークアップ可とした。（ソートキーとするセルについてはマークアップの存在は不可。）

InternetExplorer及びOperaではすんなり動いたが、Gecko(Netscape/Mozilla)ではエラーが発生。
調べてみると、ソース上の改行とタブインデントが問題だった。
IEやOperaは無効となる改行などはDOMツリーには存在しないのだが、Geckoではテキストノードとして存在してしまうのが原因だった。
とりあえず、想定外のノード*1は処理中に捨てる仕様で解決。

後は現在のソートキーの視覚化、逆順ソートなども採りいれたらそこそこ使えるサンプルになるかも。

サンプル＞＞ Table Sort

<html>
<head>
<title>Table Sort</title>

<style type="text/css">
<!--
table,th,td {
	border:1px solid #999;
	padding:2pt;
	font-family:monospace;
}
th span {
	cursor:pointer;
	text-decoration:underline;
}
-->
</style>

<script type="text/javascript">
<!--
var TRSort = new Object;
TRSort.cmp = function(C1,C2) {
	var C1value = C1.childNodes[TRSort.Tcol].firstChild.nodeValue;
	var C2value = C2.childNodes[TRSort.Tcol].firstChild.nodeValue;
	if(TRSort.Ctype == 'n') {
		C1value = parseInt(C1value);
		C2value = parseInt(C2value);
	}
	if(C1value > C2value) return 1;
	if(C1value < C2value) return -1;
	return 0;
}
TRSort.Tcol=0;
TRSort.CType='n';

// TableSort テーブルのID、ターゲットのカラム、セルのタイプ(String/Num)
function TableSort(Tid,Tcol,Ctype) {
	var Tbl=document.getElementById(Tid);
	var Tbod = Tbl.getElementsByTagName('TBODY')[0];
	var Trs = Tbod.getElementsByTagName('TR');

	var newTR = new Array();

	// TRを退避、TBODYから削除
	while(Tbod.firstChild) {
		if(Tbod.firstChild.nodeName == "TR" ) {
			newTR.push(Tbod.firstChild.cloneNode(true));
		}
		Tbod.removeChild(Tbod.firstChild);
	}

	// TRをSORT
	TRSort.Tcol = Tcol;
	TRSort.Ctype = Ctype;

	// newTRからセル(TD)以外の子ノードを削除
	for(var i=0;i<newTR.length;i++) {
		for(Xp=newTR[i].firstChild;Xp;Xp=NextXp) {
			NextXp = Xp.nextSibling;
			if(Xp.nodeName != 'TD') {
				newTR[i].removeChild(Xp);
			}
		}
	}

	newTR.sort(TRSort.cmp);

	// TRをTBODYに追加
	for(var i=0;i<newTR.length;i++) {
		Tbod.appendChild(newTR[i]);
	}

}
//-->
</script>

</head>
<body>

<h1>Table Sort</h1>

<table id="tb1">
 <thead>
  <tr>
   <th><span onclick="TableSort('tb1', 0, 's')">名前</span></th>
   <th><span onclick="TableSort('tb1', 1, 'n')">年齢</span></th>
   <th>コメント</th>
  </tr>
 </thead>
 <tbody>
  <tr><td>Cyndy</td><td>48</td><td><p>あいう<br>えお</p></td></tr>
  <tr><td>Daisy</td><td>24</td><td><p>かきくけこ</p></td></tr>
  <tr><td>Alice</td><td>38</td><td><p>さしすせそ</p><p>たちつてと</p></td></tr>
  <tr><td>Ellen</td><td>8</td><td><p>なに<br>ぬねの</p></td></tr>
  <tr><td>Barbara</td><td>52</td><td><p>はひふへほ</p></td></tr>
 </tbody>
</table>

</body>
</html>

*1:TBODY直下のTR以外、及びTR直下のTD以外