やっとの更新です(汗)
汚いサンプルですが、こんな感じです。
これは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> </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> </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>