読者です 読者をやめる 読者になる 読者になる

やっとの更新です(汗)


汚いサンプルですが、こんな感じです。

これはe-honで”JavaScript”をタイトルに含む書籍を検索した上位20位
のリストです。

▼▲をクリックすると昇順、降順って感じでソートがかかるはずです。

テーブルの左端のカラム【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>ゼロからはじめるJavaScript</td>
	<td align=left valign=middle>&nbsp;</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>JavaScriptリファレンス&逆引き</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>基礎からのJava Script 第3版</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>HTMLとスタイルシートと少しだけJav</td>
	<td align=left valign=middle>&nbsp;</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>JavaScriptワークブック</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>JavaScriptハッカーズ・プログラ</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>JavaScript逆引きクイックリファ</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>JavaScriptコンパクトリファレン</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>JScriptハンドブック</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>HTML&CSS&JavaScri 改訂</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>詳解 Java Script辞典 改訂版</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>JavaScriptビジュアル・リファレ</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>JavaScript&CGIレッスンブッ</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>プログラミング問題集 1</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>いますぐスタイルシート&JavaScri</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>コピーするだけですぐに使えるJavaSc</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>JavaScriptはじめの一歩</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>HTML演習</td>
	<td align=left valign=middle>SCCライブラリーズ</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>Java Script入門</td>
	<td align=left valign=middle>斉木 勝信 著</td>
	<td align=center valign=middle>すばる舎</td>
</tr>
<!-- ********************************************************************** -->
</body>
</html>