- ベストアンサー
テーブルソート
お世話になります 今テーブルソートをしているのですがIE,Operaではうまくいったのですがfirefoxでは nodeArray[i].childNodes[k].firstChild has no properties と警告が出てソーティングがうまくできません どのようにすればいいでしょうか？ p.s. 下記のテーブルはCGIで動的に書いたソースをコピーして擬似表示したものです 状況：偶数のonclickが作動せず奇数のonclickがずれてテーブルソートしています onclick(3)でHPのソート、onclick(5)でMPのソートという感じです・・・ 参考にしたサイトや静的に表示したテーブルでは正常に機能することもあります <script language="javascript"><!-- var x=new Array(); var nodeArray=new Array(); var n; function sortTable(k) { if(!document.getElementById) return; n = document.getElementById("ranksort").rows.length; for(i=0;i<n;i++){ nodeArray[i]=document.getElementById("t["+i+"]"); } for(i=0;i<n;i++){ xval=nodeArray[i].childNodes[k].firstChild.nodeValue; x[i]=parseFloat(xval); } sort(); show(); } function sort(){ complete=false; while(!complete){ complete=true; for(i=0;i<n-1;i++){ if(x[i]<x[i+1]){ buf=x[i];x[i]=x[i+1];x[i+1]=buf; buf=nodeArray[i];nodeArray[i]=nodeArray[i+1];nodeArray[i+1]=buf; complete=false; } } } } function show(){ tbody=document.getElementById('ranksort') for(i=0;i<n;i++){ tbody.removeChild(nodeArray[i]); } for(i=0;i<n;i++){ tbody.appendChild(nodeArray[i]); } } //--> </script> <div id='ability box'> <small>タイトルをクリックするとランキングソートされます</small> <table lang="ja" border="1" style='font-size:14px;'> <thead> <tr> <th>名前</th> <th onclick='sortTable(1);'>H P</th> <th onclick='sortTable(2);'>M P</th> <th onclick='sortTable(3);'>力</th> <th onclick='sortTable(4);'>知能</th> <th onclick='sortTable(5);'>信仰心</th> <th onclick='sortTable(6);'>生命力</th> <th onclick='sortTable(7);'>素早さ</th> <th onclick='sortTable(8);'>運</th> <th onclick='sortTable(9);'>人気</th> <th onclick='sortTable(10);'>賞金額</th> </tr> </thead> <tbody id="ranksort"> <tr id="t[0]"> <td>452</td> <td>32</td> <td>15</td> <td>13</td> <td>5</td> <td>5</td> <td>6</td> <td>5</td> <td>10</td> <td>0</td> <td>10000000</td> </tr> <tr id="t[1]"> <td>コス</td> <td>26</td> <td>14</td> <td>6</td> <td>6</td> <td>13</td> <td>11</td> <td>10</td> <td>13</td> <td>0</td> <td>0</td> </tr> <tr id="t[2]"> <td>コスモス</td> <td>30</td> <td>11</td> <td>13</td> <td>13</td> <td>12</td> <td>6</td> <td>6</td> <td>5</td> <td>0</td> <td>0</td> </tr> </tbody></table> </div>
- leap_day
- お礼率94% (142/151)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
===========Q3160237-1.html (BOM付きUTF-8)==================== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>テスト</title> <!-- XMLとCDATAセクションを意識すると色々複雑なので別ファイルにした --> <script type="text/javascript" src="Q3160237-1.js"></script> </head> <body> <!-- id属性の命名規則の変更についてはjavascriptのソースにも述べているが "["や"]"，および空白を含まないようにして、かつ、大文字に変更している --> <div id="ABILITYBOX"> <!-- 多分id属性に空白は取れない。複数の値を取れるclassには入れられるが --> <small>タイトルをクリックするとランキングソートされます</small> <table lang="ja" border="1" style="font-size:14px;"> <thead> <tr> <th>名前</th> <!-- 今は特に述べる気は無いけれど 番号での管理でなく、ハッシュテーブルを使った管理の方が後々楽なこともあるかも--> <th onclick='sortTable(1);'>H P</th> <th onclick='sortTable(2);'>M P</th> <th onclick='sortTable(3);'>力</th> <th onclick='sortTable(4);'>知能</th> <th onclick='sortTable(5);'>信仰心</th> <th onclick='sortTable(6);'>生命力</th> <th onclick='sortTable(7);'>素早さ</th> <th onclick='sortTable(8);'>運</th> <th onclick='sortTable(9);'>人気</th> <th onclick='sortTable(10);'>賞金額</th> </tr> </thead> <tbody id="RANKSORT"> <tr id="T0"> <td>452</td> <td>32</td> <td>15</td> <td>13</td> <td>5</td> <td>5</td> <td>6</td> <td>5</td> <td>10</td> <td>0</td> <td>10000000</td> </tr> <tr id="T1"> <td>コス</td> <td>26</td> <td>14</td> <td>6</td> <td>6</td> <td>13</td> <td>11</td> <td>10</td> <td>13</td> <td>0</td> <td>0</td> </tr> <tr id="T2"> <td>コスモス</td> <td>30</td> <td>11</td> <td>13</td> <td>13</td> <td>12</td> <td>6</td> <td>6</td> <td>5</td> <td>0</td> <td>0</td> </tr> </tbody> </table> </div> </body> </html> ===========Q3160237-1.js (BOM付きUTF-8)==================== /* Option Explicit(変数宣言の強制)だと思っておこう。*/ var x=new Array(); var nodeArray = new Array(); var n; var MODE = "HTML"; function sortTable(k) { if(!document.getElementById){ return; } /* id属性大文字 */ /* HTML,XHTML的にはOKなんだけど、XML的に見ると少し気になる(汗) */ n = document.getElementById("RANKSORT").rows.length; for(var i=0;i<n;i++){ /* id属性として"["や"]"が使えるとは思わない。ので修正しよう！ 厳密には、HTMLではid属性は大文字になるので念のために変更しておく */ nodeArray[i]=document.getElementById("T"+i); } for(var i=0;i<n;i++){ var xval; /* 【改行文字はテキストノード】でchildNodesに含まれるから気をつけよう firstChildにしているのはIEとそれ以外のブラウザでinnerTextとtextContentを使い分けたくないからだ。 */ if(MODE == "XML"){ xval = nodeArray[i].getElementsByTagNameNS("http://www.w3.org/1999/xhtml","td")[k].firstChild.nodeValue; x[i]=parseFloat(xval); } else if(MODE == "HTML"){ xval = nodeArray[i].getElementsByTagName("td")[k].firstChild.nodeValue; x[i]=parseFloat(xval); } } sort(); show(); } function sort(){ var complete; complete=false; while(!complete){ complete=true; for(var i=0;i<n-1;i++){ if(x[i]<x[i+1]){ var buf; buf=x[i];x[i]=x[i+1];x[i+1]=buf; buf=nodeArray[i];nodeArray[i]=nodeArray[i+1];nodeArray[i+1]=buf; complete=false; } } } } function show(){ var tbody; /* この辺は面白かった */ tbody=document.getElementById("RANKSORT"); /* id属性大文字 */ for(var i=0;i<n;i++){ tbody.removeChild(nodeArray[i]); } for(var i=0;i<n;i++){ tbody.appendChild(nodeArray[i]); } }
その他の回答 (3)
- steel_gray
- ベストアンサー率66% (1052/1578)
原因に関しては他の方の回答で。 onclickで数値を書いて渡すとか、自前でsortするところとかちょっと改善。 今回はCGIで吐き出すHTMLという事でそのままにしましたが セルの値を得るあたりは他の方もいっていますが、改行が別ノードととられる場合があるので注意が必要。 <html> <head> <title></title> <style type="text/css"> </style> <script type="text/javascript"> function sortTable(Cell) { var TB = Cell.parentNode.parentNode.parentNode.tBodies[0]; var workT = new Array; while(TB.rows.length) { var wO = new Object(); wO.rec = TB.rows[0].cloneNode(true);; wO.value = parseInt(TB.rows[0].cells[Cell.cellIndex].firstChild.nodeValue); TB.deleteRow(0); workT.push(wO); } workT.sort(rankCmp); while(workT.length) { TB.appendChild(workT[0].rec); workT.shift(); } } function rankCmp(a,b) { if(b.value < a.value) return 1; if(b.value > a.value) return -1; return 0; } </script> </head> <body> <div id='ability box'> <small>タイトルをクリックするとランキングソートされます</small> <table lang="ja" border="1" style='font-size:14px;'> <thead> <tr> <th>名前</th> <th onclick='sortTable(this);'>H P</th> <th onclick='sortTable(this);'>M P</th> <th onclick='sortTable(this);'>力</th> <th onclick='sortTable(this);'>知能</th> <th onclick='sortTable(this);'>信仰心</th> <th onclick='sortTable(this);'>生命力</th> <th onclick='sortTable(this);'>素早さ</th> <th onclick='sortTable(this);'>運</th> <th onclick='sortTable(this);'>人気</th> <th onclick='sortTable(this);'>賞金額</th> </tr> </thead> <tbody id="ranksort"> <tr> <td>452</td> <td>32</td> <td>15</td> <td>13</td> <td>5</td> <td>5</td> <td>6</td> <td>5</td> <td>10</td> <td>0</td> <td>10000000</td> </tr> <tr> <td>コス</td> <td>26</td> <td>14</td> <td>6</td> <td>6</td> <td>13</td> <td>11</td> <td>10</td> <td>13</td> <td>0</td> <td>0</td> </tr> <tr> <td>コスモス</td> <td>30</td> <td>11</td> <td>13</td> <td>13</td> <td>12</td> <td>6</td> <td>6</td> <td>5</td> <td>0</td> <td>0</td> </tr> </tbody></table> </div> </body> </html>
お礼
回答ありがとうございます TB.deleteRow(0); とか workT.push(wO); とか workT.shift(); など見た事ない処理でとても新鮮でした（＾＾） あとソートが降順でなく昇順になっておられたようなのでrankCmp(a,b)の > < を反対にして使わせてもらいます ありがとうございます
nodeArray[0](document.getElementById(t[0])) の childNodes[0] が nodeName=#text（改行) なら テキストノードにfirstChildプロパティは無いからだと思います。 それかfirstChildがundefinedでそのnodeValueを参照しようとしているためundefinedにnodeValueプロパティが無いせいかもしれません IE6はtrの開始タグ直後の改行はchildNodesにならないと思いました。 try{ xval=nodeArray[i].childNodes[k].firstChild.nodeValue; }catch(e){ ?????? } if(typeof nodeArray[i].childNodes[k] == "object"){ xval=nodeArray[i].childNodes[k].firstChild.nodeValue; }else if(typeof nodeArray[i].childNodes[k] == "string"){ ????? }
お礼
回答ありがとうございます No.1様のお礼にも書きましたがDOM初心者です（－－；） try { } は何処に差し込めばよかったのでしょうか？ ?????の部分は何でしょう？ 詳しく回答していただいたのにこちらの知識不足ですみません
>nodeArray[i].childNodes[k].firstChild nodeArray[i].childNodes[0] ←→ nodeArray[i].childNodes.firstChild だからじゃない？
お礼
回答ありがとうございます すみません。質問内に追記しておけばよかったですね（－－；） サンプルソースもnの値を取得するところとid名を変えただけのDOM初心者です（＞＜） ですのでこれをどのように使えばよいのか分かりませんでした・・・ せっかく回答していただいたのにすみません
関連するQ&A
- テーブルをクイックソートするには？
未経験者として、今年入社したばかりの超初心者です。 javascriptを始めて、３ヶ月です。 「テーブルをクイックソートする」課題が出たのですが、アルゴリズムデータ構造が分かっておらずとても困っています。 スクリプトは以下です。 どうか、アドバイスをお願いします！！ <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>ソート</title> <script language ="JavaScript"> <!-- var x=new Array(); var nodeArray=new Array(); var n; function TableSort() { var tbd1 = document.getElementById("tbd1"); //ドキュメントにある特定のIｄを持つオブジェクトを示す //HTMLタグのID属性で指定したもの var tre = tbd1.getElementsByTagName("tr") ; // タグを取得する n = tre.length ; // 行の数 for(i=0;i<n;i++) { if (document.getElementById("tr"+i)) { // alert(document.getElementById("tr"+i)); nodeArray[i]=document.getElementById("tr"+i); } } } function show() { tbody=document.getElementById('tbd1'); for(i=0;i<n;i++) { tbody.removeChild(nodeArray[i]); //子供のノードオブジェクトを削除 } for(i=0;i<n;i++) { tbody.appendChild(nodeArray[i]); //子供のノードオブジェクトを追加 } } function stringSort(0) { start = x[0]; end = x[n-1]; for(i=0;i<n;i++) { xval=nodeArray[i].childNodes[k].firstChild.nodeValue; //ソート対象となるデータをxの配列に設定している x[i]=xval; } quickSort(x,start,end); show(); } function quickSort(x,start,end){ // var data = Math.floor((x[start]+x[end])/2); //基準値（平均を適用）小数点以下切捨て var i = start; var j = end; var e; e = x[start]; while(true){ while(x[i] < e) i++; //基準値より大きい値を先頭から探す while(x[j] > e) j--; //基準値より小さい値を末尾から探す if( i >= j ) break; //両者が交錯していたら抜ける var n =x[i]; //交錯していなければ値を交換 x[i] =x[j]; x[j] =n; i++; // 交換した一つ後に添え字を進める j--; // 交換した一つ前に添え字を進める } if(start < i-1) quickSort(x,start,i-1); // 基準値より小さいグループの再起処理 if(j+1 < end) quickSort(x,j+1 ,end); // 基準値より大きいグループの再起処理 } //--> </script> </head> <body onload="TableSort();stringSort(0)" bgcolor="pink"> <!--<img src="img/59.gif">--> <tr><th><big><strong>数字をソートしよう！！</strong></big></th></tr> <br> <br><p> ↓click here!!</p> <table border=1 id="tb1" width=200 bgcolor="white"> <thead > <tr> <th><button onclick="stringSort(0)">push!!</button></th> </tr> </thead> <tbody> <tr><td align=center>48</td></tr> <tr><td align=center>24</td></tr> <tr><td align=center>36</td></tr> <tr><td align=center>18</td></tr> <tr><td align=center>52</td></tr> </tbody> </table> </body> </html>
- ベストアンサー
- JavaScript
- tableソート
新着順になっているテーブルをjqueryで名前ごとにまとめることはできますか？ スレ 名前 日時 ああ ここ 2014/1/31 いい たた 2014/1/20 ああ ここ 2014/1/10 ああ ここ 2014/1/01 こんな感じにしたいです ああ ここ 2014/1/31 └ ここ 2014/1/10 └ ここ 2014/1/01 いい たた 2014/1/20 html <table width="100%"> <tr> <th>スレ</th> <th>なまえ</th> <th>新着日時</th> </tr> <tbody> <tr><td>ああ</td><td>test1</td><td>2014/01/31</td></tr> <tr><td>いい</td><td>test2</td><td>2014/01/20</td></tr> <tr><td>ああ</td><td>test3</td><td>2014/01/10</td></tr> <tr><td>ああ</td><td>test4</td><td>2014/01/01</td></tr> </tbody> </table> クリックでのソートはいりません。表示したときにソートするのみで結構です よろしくお願いします
- ベストアンサー
- JavaScript
- JS テーブルデータ：シャッフル関数の修正
JavaScript テーブルデータ：シャッフル関数の不具合を修正するには？ ここに１つのテーブルがあります。 tbody td のセルデータをシャッフルする関数を作ってみました。 どこをどのように修正したらよいのでしょうか？ 今のところ、下記の不具合があります。 ■ 行のシャッフルは出来るが、列のシャッフルがされていない （すべてのＴＤ内のシャッフルをしたい） ＜仕様＞ ・ボタンを押すごとに テーブル内を並べ替える ・thの内容は固定 ・並べ替えるのは tbody tdの内容 [HTML] <button id="button2">シャッフル</button> <table id="table5" border="1"> <thead> <tr> <th></th> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th>F</th> <th>G</th> <th>H</th> <th>I</th> <th>J</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>春</td> <td>夏</td> <td>秋</td> <td>冬</td> <td>朝</td> <td>昼</td> <td>番</td> <td>花</td> <td>鳥</td> <td>風</td> </tr> <tr> <th>2</th> <td>月</td> <td>天</td> <td>地</td> <td>人</td> <td>愛</td> <td>4.3</td> <td>3.5</td> <td>8.4</td> <td>6.1</td> <td>6.4</td> </tr> <tr> <th>3</th> <td>1.8</td> <td>7.8</td> <td>1.4</td> <td>7.5</td> <td>6.2</td> <td>6.5</td> <td>5.1</td> <td>7.9</td> <td>7.2</td> <td>2.8</td> </tr> <tr> <th>4</th> <td>83</td> <td>64</td> <td>18</td> <td>51</td> <td>36</td> <td>45</td> <td>84</td> <td>22</td> <td>16</td> <td>25</td> </tr> <tr> <th>5</th> <td>arm</td> <td>bat</td> <td>cat</td> <td>dog</td> <td>egg</td> <td>fig</td> <td>gal</td> <td>hit</td> <td>ink</td> <td>joy</td> </tr> </tbody> </table> <script> //試作中 document.getElementById("button2").onclick = function (){ Array.prototype.shuffle = function(){ var t=this,a=t.length,b=[],c=a,i,r; for(i=0;i<a;i++)b[i]=t[i]; for(i=0;i<a-1;i++){ r=Math.floor(Math.random()*c); t[i]=b[r];b[r]=b[c-1];c--; } t[a-1] = b[0]; return t; }; var subject = document.querySelector("#table5 tbody"); var rowData = []; var rows = subject.getElementsByTagName("TR"); var cells; var i, j; for (i=0; i<rows.length; i++) { rowData[i] = []; cells = rows[i].getElementsByTagName("TD"); for (j=0; j<cells.length; j++) { rowData[i][j] = cells[j].innerHTML; } } rowData.shuffle(); for (i=0; i<rowData.length; i++) { cells=rows[i].getElementsByTagName("TD"); for (j=0; j<cells.length; j++) { cells[j].innerHTML = rowData[i][j]; } } } </script>
- ベストアンサー
- JavaScript
- 動的なcheckboxのcheckedについて
動的にcgiから名簿tableを作り先頭にcheckboxを配置しています。 （□、コード、氏名） そのコードNo.取得し内容によってループ内でcheckboxをif文でオンオフしたいのですがコードNo.（rec[0]）の取得方法がわかりません。できるはずとは思うのですが私の力不足で・・・。よろしくお願いします。 var recs = xhrObj.responseText.split("<r>"); var status2 = "<table id='meibo' ><tbody><tr>" +"<th width='20'><th width='40'>No.</th><th width='120'>氏名</th>" +"</tr>"; for(var i = 1; i < recs.length - 1; i++){ rec = recs[i].split("<i>"); status2 += "<tr><td><input type='checkbox' name='checkbox' id='"+i+"' /></td>"; status2 += "<td id='"+i+"' />"+rec[0]+"</td><td id='"+i+"' />"+rec[1]+"</td>"; status2 += "</tr>"; } status2 += "</tbody></table>"; document.getElementById("status2").innerHTML = status2; var observer = document.getElementById("meibo"); setListener(observer, "click", check);
- 締切済み
- JavaScript
- dataTablesのテーブルの内容がずれる
3ステップで表をソート＆値を検索できるjavascript「dataTables」 http://www.skuare.net/test/jdatatables.html 上記サイトのjavascriptを使いソートで並べ替えることはできましたが、 <thead> <tr> (1) <th>Rendering engine</th> (2) <th>Browser</th> (3) <th>Platform(s)</th> (4) <th>Engine version</th> (5) <th>CSS grade</th> </tr> </thead> <tbody> <tr class="oddA"> (1) <td>Gecko</td> (2) <td>Firefox 1.0</td> (3) <td>Win 98+ / OSX.2+</td> (4) <td class="center">1.7</td> (5) <td class="center">A</td> </tr> （略）※trがtbodyに10個ほど入ります </tbody> <thead>の見出し部分の番号が <tbody>部分の番号と同じ並びになるはずなのですが、 (1)(2)(3)(4)(5)ではなく、 (4)(3)(2)(1)(5)となってしまいます。 http://sprymedia.co.uk/dataTables/example_alt_pagination.html ↑は上記解説サイトの元々のサイトなのですが、 こちらのhtmlのソースの<tbody>部分の<td>も(1)～(5)と順番に記述されています。 これだけでは情報不足とは思いますが、 ここを変えたら直るかもしれないなどありましたら教えていただけないでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 2つのテーブルの幅を一致させたい
以下のHTMLで、2つのテーブルのセル幅が一致しません。 JavaScriptではヘッダのセル幅をボディのセル幅に合わせています。 ボディ部分の文字列をすべて日本語にするとうまくいくのですが・・・ JavaScriptというよりはHtmlの問題な気がしますが、よろしくお願いします。 jqueryを使用しています。 <html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { headerTableWidthFit(); }); $( window ).resize(function(){ headerTableWidthFit(); }); function headerTableWidthFit() { var i = 0; $('#resultBodyTable table tbody tr:eq(0) td').each(function() { $('#resultHeaderTable table th').eq(i).width($(this).width()); i++; }); } </script> </head> <body> <div id="container"> <div id="resultHeaderTable" class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> <th>お</th> <th>か</th> <th>き</th> <th>く</th> </tr> </thead> </table> </div> <div id="resultBodyTable" class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> <td>お</td> <td>か</td> <td>き</td> <td>く</td> </tr> </tbody> </table> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- TABLEの行を非表示にした際の隙間
テーブルの行をクリックアクションにて開閉したいのですが、 開いたテーブルを閉じた際に隙間ができてしまいます。 これはIE6で発生し、FireFox3では隙間無く閉じています。 IE6でも、この隙間を無くすことは可能でしょうか？ ご教授願います。 現状のスクリプトは以下のようにしています。 （クリックするのは左上のプラス／マイナスの画像です） <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <TITLE></TITLE> </HEAD> <BODY> <script type="text/javascript"> function close_list(){ document.getElementById("img").src = '../images/plus.gif'; document.getElementById("img").onclick = new Function(" open_list(); "); document.getElementById("mark").rowSpan = '1'; document.getElementById("tr_yuubin").style.display = 'none'; document.getElementById("tr_ken").style.display = 'none'; document.getElementById("tr_stat").style.display = 'none'; return; } function open_list(){ document.getElementById("img").src = '../images/minus.gif'; document.getElementById("img").onclick = new Function(" close_list(); "); document.getElementById("mark").rowSpan = '5'; document.getElementById("tr_yuubin").style.display = ''; document.getElementById("tr_ken").style.display = ''; document.getElementById("tr_stat").style.display = ''; return; } </script> <FORM> <TABLE width="755" border="1"> <TBODY align="left"> <TR> <TD width="15" align="center" id="mark" valign="top"><img name="img" id="img" src="../images/plus.gif" onclick="open_list()"></TD> <TD width="135" >タロウ </TD> <TD width=""> <INPUT type="checkbox" id="chk" name="chk" value="1">登録 </TD> </TR> <TR id="tr_yuubin" style="display: none;"> <TD width="135">郵便</TD> <TD><input name="yuubin" type="text" id="yuubin" style="width:150px" ></TD> </TR> <TR id="tr_ken" style="display: none;"> <TD width="135">都道府県</TD> <TD> <select style="width:400px"><option> </select> </TD> </TR> <TR height="20" id="tr_stat" style="display: none;"> <TD width="135">ステータス</TD> <TD> </TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML>
- 締切済み
- JavaScript
- jQueryで行の移動
ｊQueryでテーブルの行を移動させたいのですが、なかなかうまくいきません。 <table id = "table_test"> <tbody id = "test1"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button1" value="テスト1"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> <tbody id = "test2"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button2" value="テスト2"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> <tbody id = "test3"> <tr> <th>見出し1</th> <th>見出し2</th> <th><input type="button" id="button3" value="テスト3"></th> </tr> <tr> <td>項目1</td> <td>項目2</td> <td>項目3</td> </tr> </tbody> </table> 処理としては、button1を押下したら、<tbody id = "test1">～</tbody>の内容を<tbody id = "test2">と<tbody id = "test3">の間にくるように移動させたいです。 trの内容を次のtrの次に移動させることは調べてわかったのですが、tbodyで囲まれている部分をごっそり抜き出して、次のtbodyの後に移動させる方法がわかりません。 tbody内にはtrが複数あるため、移動させるというよりは、追加させてから削除するといった感じになるのでしょうか？ どなたかご教授お願い致します。
- ベストアンサー
- JavaScript
- テーブルを順番通りに直すやつを外部で読み込みたい。
テーブルを順番通りに直すプログラムを外部で読み込めるようにしたいです。 //本文 <table id="sort_table"> <tr> <th>No</th> <th>全角項目</th> <th>数値項目</th> <th>カンマ</th> </tr> <tr><td>1</td><td>かきくけこ</td><td>1</td><td>1,000</td></tr> <tr><td>2</td><td>さしすせそ</td><td>10</td><td>10,000</td></tr> <tr><td>3</td><td>あいうえお</td><td>100</td><td>2,000</td></tr> <tr><td>4</td><td>カキクケコ</td><td>2001</td><td>3,000</td></tr> <tr><td>5</td><td>アイウエオ</td><td>2002</td><td>20,000</td></tr> <tr><td>6</td><td>サシスセソ</td><td>2003</td><td>11,000</td></tr> <tr><td>7</td><td>一丁目</td><td>1.234</td><td>12,000</td></tr> <tr><td>8</td><td>二丁目</td><td>12.34</td><td>30,000</td></tr> <tr><td>9</td><td>三丁目</td><td>123.4</td><td>31,000</td></tr> <tr><td>10</td><td>１丁目</td><td>0.001</td><td>32,000</td></tr> <tr><td>11</td><td>２丁目</td><td>0.002</td><td>400,000</td></tr> <tr><td>12</td><td>３丁目</td><td>0.003</td><td>50</td></tr> </table> <style> #sort_table { border-collapse:collapse; } #sort_table td { border:1px solid lightgray; } #sort_table th { cursor:pointer; background-color:lightgray; } </style> //javascript <script> window.addEventListener('load', function () { let column_no = 0; //今回クリックされた列番号 let column_no_prev = 0; //前回クリックされた列番号 document.querySelectorAll('#sort_table th').forEach(elm => { elm.onclick = function () { column_no = this.cellIndex; //クリックされた列番号 let table = this.parentNode.parentNode.parentNode; let sortType = 0; //0:数値 1:文字 let sortArray = new Array; //クリックした列のデータを全て格納する配列 for (let r = 1; r < table.rows.length; r++) { //行番号と値を配列に格納 let column = new Object; column.row = table.rows[r]; column.value = table.rows[r].cells[column_no].textContent; sortArray.push(column); //数値判定 if (isNaN(Number(column.value))) { sortType = 1; //値が数値変換できなかった場合は文字列ソート } } if (sortType == 0) { //数値ソート if (column_no_prev == column_no) { //同じ列が2回クリックされた場合は降順ソート sortArray.sort(compareNumberDesc); } else { sortArray.sort(compareNumber); } } else { //文字列ソート if (column_no_prev == column_no) { //同じ列が2回クリックされた場合は降順ソート sortArray.sort(compareStringDesc); } else { sortArray.sort(compareString); } } //ソート後のTRオブジェクトを順番にtbodyへ追加（移動） let tbody = this.parentNode.parentNode; for (let i = 0; i < sortArray.length; i++) { tbody.appendChild(sortArray[i].row); } //昇順／降順ソート切り替えのために列番号を保存 if (column_no_prev == column_no) { column_no_prev = -1; //降順ソート } else { column_no_prev = column_no; } }; }); }); //数値ソート（昇順） function compareNumber(a, b) { return a.value - b.value; } //数値ソート（降順） function compareNumberDesc(a, b) { return b.value - a.value; } //文字列ソート（昇順） function compareString(a, b) { if (a.value < b.value) { return -1; } else { return 1; } return 0; } //文字列ソート（降順） function compareStringDesc(a, b) { if (a.value > b.value) { return -1; } else { return 1; } return 0; } </script> let、var、constはfunctionの中で使うと、ローカル変数となってしまいます。 グローバル変数にするにはどのようにしたらよいのでしょうか。 しかし、let table、let tbodyに対応する関数がございません。 もう八方塞がりです。 jsの部分のみご記述ください。
- 締切済み
- JavaScript
- マウスオーバー時テーブルの背景色を変えているのですが
質問させていただきます。 テーブルを作成してマウスオーバーしている行の バックカラーを変えるプログラムを作成しています。 ですが、rowspanを使用すると、rowspanが別の行 扱いになり、バックカラーが変えられなくなってしまいました。 一緒にしたい場合どうしたら良いでしょうか。 もしわかりましたらご教授下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"><!-- firstcolor="#ffffff"; //初めの色 nextcolor="#eeeeee"; //変更後の色 function table_row(table_id){ tobj=document.getElementById(table_id).tBodies[0]; for (i=0; i<tobj.rows.length;i++){ tobj.rows[i].onmouseover=function(){this.style.backgroundColor=nextcolor}; tobj.rows[i].onmouseout=function(){this.style.backgroundColor=firstcolor}; } }// --></script> </head> <body> <table border=1 id="data_table2"> <thead> <tr> <th>No</th><th>DATA1</th><th>DATA2</th><th>DATA3</th> </tr> </thead> <tbody> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td rowspan="2"> </td><td rowspan="2"> </td><td>DATA</td><td>DATA</td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td>No</td><td>DATA</td><td>DATA</td><td>DATA</td> </tr> </tbody> </table> <script>table_row("data_table2")</script> </body> </html>
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます 教示ソースをコピペして試したところ xval = nodeArray[i].getElementsByTagNameNS("http://www.w3.org/1999/xhtml","td")[k].firstChild.no... の部分でsyntax errorとなりましたが 最後のno...をnodeValue;にかえたところうまくいきました（＾＾） ありがとうございます