やっとの更新です（汗）
汚いサンプルですが、こんな感じです。
これはe-honで”JavaScript”をタイトルに含む書籍を検索した上位２０位
のリストです。
▼▲をクリックすると昇順、降順って感じでソートがかかるはずです。
テーブルの左端のカラム【No】の部分だけ単純に文字列としてソートを
かけると1の次に11とかが並んでおかしくなります。
ですのでそこだけ文字列を数字に変換してソートをかけるようにしています。
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1-strict.dtd">
<html xhtmlns="http://www.w.org/1999/xhtml"xml:lang="ja">
<head>
<title>テーブルのソートサンプル</title>
<script type="text/javascript">
<!--
var cell = new Array();
var row = new Array();
var i, n_rows;
// ページのロード時に呼び出される関数initをセット
window.onload = init;
// ページのロード時に呼び出される関数
function init(){
// tr要素
var tr = document.getElementsByTagName("tr");
// 見出し行を除く行の数
n_rows = tr.length-1;
// 見出し行を除くテーブルの行を配列rowに代入
for( i=0; i<n_rows; i++ ){
row[i] = tr[i+1];
}
}
// col→列の番号、asc→昇順:true 降順:false
function sortTable(col, asc){
if(col == 0){
// ソート対象の列を配列cellに代入
for( i=0; i<n_rows; i++ ){
num = row[i].childNodes[col].firstChild.nodeValue;
cell[i] = parseInt(num, 10);
}
}else{
// ソート対象の列を配列cellに代入
for( i=0; i<n_rows; i++ ){
cell[i] = row[i].childNodes[col].firstChild.nodeValue;
}
}
// 配列cellの順に配列rowをソート
sortData(asc);
// テーブルの書き換え
replaceTable();
SetStyle();
}
// 配列cellの順に配列rowをソート
function sortData(asc){
var tmp;
var finish_sort = false;// 交換をしなければソート終了
while(!finish_sort){
finish_sort = true;
for( i=0; i<n_rows-1; i++ ){
if( (asc && cell[i]>cell[i+1]) || // 昇順
(!asc && cell[i]<cell[i+1]) ){ // 降順
// cellの交換
tmp = cell[i]; cell[i] = cell[i+1]; cell[i+1] = tmp;
// rowの交換
tmp = row[i]; row[i] = row[i+1]; row[i+1] = tmp;
// 交換をしたのでソート終了ではない
finish_sort = false;
}
}
}
}
// テーブルの書き換え
function replaceTable(){
// tbody要素
var tbdy = document.getElementById("tbdy");
// tbody要素の行を削除
for( i=0; i<n_rows; i++ ){
tbdy.removeChild(row[i]);
}
// tbody要素の行を追加
for( i=0; i<n_rows; i++ ){
tbdy.appendChild(row[i]);
}
}
function SetStyle(){
var TRS = document.getElementsByTagName("tr");
for(i=1; i<TRS.length; i++){
var number = i;
if(number%2 == 1){
//listN = 0;
TRS[i].className = "list0";
}else{
//listN = 1;
TRS[i].className = "list1";
}
}
}
// -->
</script>
</head>
<style type="text/css">
BODY,DIV,TABLE,THEAD,TBODY,TFOOT,TR,TH,TD,P {
font-family:"MS P ゴシック"; font-size:x-small
}
TR,TH,TD { border: 1px ridge; border-collapse: collapse;}
tr.list {
background-color:#ccccff;
padding-left:3px;
padding-right:3px;
white-space:nowrap;
font-weight:bold;
}
tr.list0 {
background-color:#ffffff;padding-left:3px;font-size:x-small
}
tr.list1 {
background-color:#ccffcc;padding-left:3px;font-size:x-small
}
</style>
<body>
<body text="#000000">
<table frame=box cellspacing=0 cols=6 rules=groups border=1>
<colgroup><col width=86></colgroup>
<colgroup><col width=86></colgroup>
<colgroup><col width=334></colgroup>
<colgroup><col width=86></colgroup>
<colgroup><col width=143></colgroup>
<colgroup><col width=85></colgroup>
<colgroup><col width=30></colgroup>
<thead>
<tr class='list'>
<th rowspan=2 width=15 height=34 align=center valign=middle>No
<span onclick='sortTable(0,true)'>▲</span>
<span onclick='sortTable(0,false)'>▼</span></th>
<th rowspan=2 width=65 align=center valign=middle> ISBN
<span onclick='sortTable(1,true)'>▲</span>
<span onclick='sortTable(1,false)'>▼</span></th>
<th rowspan=2 width=270 align=center valign=middle> 書名
<span onclick='sortTable(2,true)'>▲</span>
<span onclick='sortTable(2,false)'>▼</span></th>
<th rowspan=2 width=130 align=center valign=middle> 著訳者名
<span onclick='sortTable(3,true)'>▲</span>
<span onclick='sortTable(3,false)'>▼</span></th>
<th rowspan=2 width=85 align=center valign=middle> 出版社名
<span onclick='sortTable(4,true)'>▲</span>
<span onclick='sortTable(4,false)'>▼</span></th>
</tr>
</thead>
<tbody id="tbdy">
<tr class="list0">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">1</td>
<td align=middle valign=middle>4893116487</td>
<td align=left valign=middle>ゼロからはじめるＪａｖａＳｃｒｉｐｔ</td>
<td align=left valign=middle> </td>
<td align=center valign=middle>富士通オフィス</td>
</tr>
<tr class="list1">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">2</td>
<td align=middle valign=middle>4798013919</td>
<td align=left valign=middle>ＪａｖａＳｃｒｉｐｔリファレンス＆逆引き</td>
<td align=left valign=middle>井上 健語 著</td>
<td align=center valign=middle>秀和システム</td>
</tr>
<tr class="list0">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">3</td>
<td align=middle valign=middle>4777512193</td>
<td align=left valign=middle>基礎からのＪａｖａ Ｓｃｒｉｐｔ 第３版</td>
<td align=left valign=middle>岡田 克司 著</td>
<td align=center valign=middle>工学社</td>
</tr>
<tr class="list1">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">4</td>
<td align=middle valign=middle>4872836111</td>
<td align=left valign=middle>ＨＴＭＬとスタイルシートと少しだけＪａｖ</td>
<td align=left valign=middle> </td>
<td align=center valign=middle>エクスメディア</td>
</tr>
<tr class="list0">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">5</td>
<td align=middle valign=middle>487783818X</td>
<td align=left valign=middle>ＪａｖａＳｃｒｉｐｔワークブック</td>
<td align=left valign=middle>相沢 裕介 著</td>
<td align=center valign=middle>日教販</td>
</tr>
<tr class="list1">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">6</td>
<td align=middle valign=middle>4896272862</td>
<td align=left valign=middle>ＪａｖａＳｃｒｉｐｔハッカーズ・プログラ</td>
<td align=left valign=middle>佐久嶋 ひろみ 著</td>
<td align=center valign=middle>メディア・テッ</td>
</tr>
<tr class="list0">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">7</td>
<td align=middle valign=middle>483991740X</td>
<td align=left valign=middle>ＪａｖａＳｃｒｉｐｔ逆引きクイックリファ</td>
<td align=left valign=middle>古籏 一浩 著</td>
<td align=center valign=middle>毎日コミュニケ</td>
</tr>
<tr class="list1">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">8</td>
<td align=middle valign=middle>4839918724</td>
<td align=left valign=middle>ＪａｖａＳｃｒｉｐｔコンパクトリファレン</td>
<td align=left valign=middle>蔵守 伸一 著</td>
<td align=center valign=middle>毎日コミュニケ</td>
</tr>
<tr class="list0">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">9</td>
<td align=middle valign=middle>483991902X</td>
<td align=left valign=middle>ＪＳｃｒｉｐｔハンドブック</td>
<td align=left valign=middle>佐藤 信正 著</td>
<td align=center valign=middle>毎日コミュニケ</td>
</tr>
<tr class="list1">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">10</td>
<td align=middle valign=middle>4798010057</td>
<td align=left valign=middle>ＨＴＭＬ＆ＣＳＳ＆ＪａｖａＳｃｒｉ 改訂</td>
<td align=left valign=middle>大藤 幹 著</td>
<td align=center valign=middle>秀和システム</td>
</tr>
<tr class="list0">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">11</td>
<td align=middle valign=middle>4902444070</td>
<td align=left valign=middle>null</td>
<td align=left valign=middle>null</td>
<td align=center valign=middle>null</td>
</tr>
<tr class="list1">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">12</td>
<td align=middle valign=middle>4798010049</td>
<td align=left valign=middle>詳解 Ｊａｖａ Ｓｃｒｉｐｔ辞典 改訂版</td>
<td align=left valign=middle>半場 方人 著</td>
<td align=center valign=middle>秀和システム</td>
</tr>
<tr class="list0">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">13</td>
<td align=middle valign=middle>4844357808</td>
<td align=left valign=middle>ＪａｖａＳｃｒｉｐｔビジュアル・リファレ</td>
<td align=left valign=middle>シーズ 編著</td>
<td align=center valign=middle>インプレスコミ</td>
</tr>
<tr class="list1">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">14</td>
<td align=middle valign=middle>4883374033</td>
<td align=left valign=middle>ＪａｖａＳｃｒｉｐｔ＆ＣＧＩレッスンブッ</td>
<td align=left valign=middle>エビスコム 著</td>
<td align=center valign=middle>ソシム</td>
</tr>
<tr class="list0">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">15
<td align=middle valign=middle>4902444046</td>
<td align=left valign=middle>プログラミング問題集 １</td>
<td align=left valign=middle>オープンナレッジ 著</td>
<td align=center valign=middle>オープンナレッジ</td>
</tr>
<tr class="list1">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">16</td>
<td align=middle valign=middle>488309264X</td>
<td align=left valign=middle>いますぐスタイルシート＆ＪａｖａＳｃｒｉ</td>
<td align=left valign=middle>井上 健語 著 </td>
<td align=center valign=middle>ジャストシステ</td>
</tr>
<tr class="list0">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">17</td>
<td align=middle valign=middle>4898145213</td>
<td align=left valign=middle>コピーするだけですぐに使えるＪａｖａＳｃ</td>
<td align=left valign=middle>立山 秀利 著</td>
<td align=center valign=middle>ローカス</td>
</tr>
<tr class="list1">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">18</td>
<td align=middle valign=middle>4877830987</td>
<td align=left valign=middle>ＪａｖａＳｃｒｉｐｔはじめの一歩</td>
<td align=left valign=middle>堀内 明 著</td>
<td align=center valign=middle>日教販</td>
</tr>
<tr class="list0">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">19 </td>
<td align=middle valign=middle>4886476708</td>
<td align=left valign=middle>ＨＴＭＬ演習</td>
<td align=left valign=middle>ＳＣＣライブラリーズ</td>
<td align=center valign=middle>エスシーシー</td>
</tr>
<tr class="list1">
<td height=17 align=center valign=middle sdval="1" sdnum="1041;">20</td>
<td align=middle valign=middle>4883993302</td>
<td align=left valign=middle>Ｊａｖａ Ｓｃｒｉｐｔ入門</td>
<td align=left valign=middle>斉木 勝信 著</td>
<td align=center valign=middle>すばる舎</td>
</tr>
<!-- ********************************************************************** -->
</body>
</html>
