テーブルをクイックソートする方法
- JavaScriptを使用して、HTMLのテーブルをクイックソートする方法について教えてください。
- 超初心者の未経験者が、Javascriptでテーブルをクイックソートする方法について困っています。アルゴリズムデータ構造が理解できていないため、アドバイスが欲しいです。
- テーブル内の数字をクイックソートするためのJavaScriptコードと、HTMLの例があります。ソートアルゴリズムについての説明と、コードの解説をお願いします。
- ベストアンサー
テーブルをクイックソートするには？
未経験者として、今年入社したばかりの超初心者です。 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>
- kuma31
- お礼率75% (6/8)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
クイックソート http://ja.wikipedia.org/wiki/%E3%82%AF%E3%82%A4%E3%83%83%E3%82%AF%E3%82%BD%E3%83%BC%E3%83%88 スクリプトは動作しないですね・・・。FirefoxのFirebugプラグインでデバッグされるのがよろしいかと。 間違っている点をいくつかあげると ---------- function stringSort(0) { の引数定義が0というのは×。通常変数名を定義。ここでは不要で呼び出しにも要らないかと。 ---------- document.getElementById("tr"+i)) 該当IDの要素がないので×。ここで取得したい要素オブジェクトはtreに入っているのがわかるでしょうか？ ---------- quickSort(x,start,end); のstart、endはインデックスを指定すべき。 start = x[0]; end = x[n-1]; では値が入ってしまう。 ---------- var e; e = x[start]; 基準値がこれでは・・・。 中央値算出すると逆に手間がかかるので、インデックス的に中央近辺にいるのを使用するといいでしょう。 ---------- あと、一番問題なのは、これでは値の配列はソートできても、目的であるノードのソートができないことです。 ヒント。 x[i]=[xval, nodeArray[i]]; とします。※[a, b] で new Array(a, b) と同じ。 ---------- 単に業務で使えればいいということであれば答えてしまうのですが、課題ということなのでこれぐらいにしておきます。 頑張ってください＾＾
その他の回答 (2)
- susie-t
- ベストアンサー率86% (37/43)
> tbody.appendChild(x[i][1]) > とありますが、子供のノードオブジェクトを追加 > する時に、１行足しているという考えなのでしょうか？？ １行足している→[1]のことを指していますか？ だとすると、Noです。 [1]は配列のインデックス指定です。 ---------------------- var ary = new Array(); ary[1] = "one"; ---------------------- とかの[1]と同じです。 つまり、x[i]が配列なのです。更に言えば、xが2次元配列になっているということでもあります。 ---------------------- for(i=0;i<n;i++) { xval=nodeArray[i].firstChild.firstChild.nodeValue; //ソート対象となるデータをxの配列に設定している x[i]=[xval, nodeArray[i]]; } ---------------------- で2次元配列が作成されています。どういうデータかというと ---------------------- [0] [1] [0] 48 1行目のオブジェクト [1] 24 2行目のオブジェクト [2] 36 3行目のオブジェクト [3] 18 4行目のオブジェクト [4] 52 5行目のオブジェクト ---------------------- というデータです。で、quickSortを再帰的に呼び出して値(横軸0)を元に全体をソートします。 ---------------------- [0] [1] [0] 18 4行目のオブジェクト [1] 24 2行目のオブジェクト [2] 36 3行目のオブジェクト [3] 48 1行目のオブジェクト [4] 52 5行目のオブジェクト ---------------------- この後、showで表示されているテーブルの行を全部消した後(removeChild)、この2次元配列の行のオブジェクト(横軸1)を順番に追加する(appendChild)ことでソート結果が表示されるわけです。この横軸1が質問の[1]に対応します。 ・・・2次元配列とか、プログラム初めて間もない方にはちょっと難易度が高いかもしれませんね＾＾； 先は長いですから、今理解できなくても焦らないでいいと思いますよ。ああ、そんな話があるんだ、程度でも頭に入れておけばあとで役に立つと思います。
お礼
回答ありがとうございました。 説明がとってもわかりやすいです！！ 本当に先は長いですが、susie-tさんが 教えてくださったことが、役立てるように がんばります。 また、分からないことがありましたら、 ご指導いただきたいと思います。 本当にありがとうございました(＞θ＜)
- susie-t
- ベストアンサー率86% (37/43)
了解しました。回答です。(なるべく元のコードを使用するようにしています。効率化できる部分もあるのですが、学習のためにはこちらのほうがいいと思いました。) ------------------------- <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++) { nodeArray[i] = tre[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(x[i][1]); //子供のノードオブジェクトを追加 } } function stringSort() { start = x[0]; end = x[n-1]; for(i=0;i<n;i++) { xval=nodeArray[i].firstChild.firstChild.nodeValue; //ソート対象となるデータをxの配列に設定している x[i]=[xval, nodeArray[i]]; } quickSort(x,0,x.length-1); show(); } function quickSort(x,start,end){ var data = Math.floor((start + end)/2); var i = start; var j = end; var e; e = x[data]; while(true){ while(x[i][0] < e) i++; //基準値より大きい値を先頭から探す while(x[j][0] > 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();" 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()">push!!</button></th> </tr> </thead> <tbody id="tbd1"> <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> --------------------------------------- 処理が理解できたら、効率化に挑戦してみることをオススメします。(学習するのが違う言語になってしまったとのことなので、時間がないかもしれませんが) 頑張ってください＾＾
お礼
susie-tさん、回答ありがとうございます。 お礼が遅くなってしまって申し訳ないです。 言語が変わっても、javascriptは勉強を続けていきます。 「頑張ってください」の一言はとても ありがたかったです。本当にありがとうございました！！
補足
susie-tさん、回答ありがとうございました。 たびたび申し訳ありません。 教えてください。 tbody.appendChild(x[i][1]) とありますが、子供のノードオブジェクトを追加 する時に、１行足しているという考えなのでしょうか？？ よろしくお願いします。
関連するQ&A
- テーブルソート
お世話になります 今テーブルソートをしているのですが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>
- ベストアンサー
- JavaScript
- borderの指定方法
var tbl = document.createElement("table"); var tbd = document.createElement("tbody"); var tr = document.createElement("tr"); var td = document.createElement("td"); td.appendChild(document.createTextNode("テストテーブル")); tr.appendChild(td); tbd.appendChild(tr); tbl.appendChild(tbd); DOMで書いたテーブルのTD要素のボーダーの指定方法で、下線だけ表示しないで枠をつけたいのですが、どのようにすればよいのでしょうか？ どなたか教えてください。 よろしくお願いします。
- 締切済み
- JavaScript
- クイックソート後の出力(pascal)
20個の整数データをクイックソートして出力せよ、という課題が出ました。クイックソートまでは出来た（コンパイルできたのでおそらく）のですが、その順に出力する方法がわかりません。どなたかお教えください。 program sort(input,output); const n = 20; type index = 1..n; var A : array[1..n] of integer; i,x,a : integer; p,j,k : index; function PIVOT(i,j : index):integer; var k:index; begin k:=i+1; while (A[i]=A[k]) and (k<=j) do k:=k+1; if k>j then PIVOT:=0 else if A[i]>=A[k] then PIVOT:=i else PIVOT:=k end; procedure SWAP(var x,y:integer); var temp:integer; begin temp:=x; x:=y; y:=temp end; procedure PARTITION(i,j:index; a:integer; var k:index); var l,r:index; begin l:=i; r:=j; while A[l]<a do l:=l+1; while A[r]>=a do r:=r-1; while l<=r do begin SWAP(A[l],A[r]); l:=l+1; r:=r-1; while A[l]<a do l:=l+1; while A[r]>=a do r:=r-1; end; k:=l end; procedure QUICKSORT(i,j:index); var a:integer; p:index; k:index; begin p:=PIVOT(i,j); if p<>0 then begin a:=A[p]; PARTITION(i,j,a,k); QUICKSORT(i,k-1); QUICKSORT(k,j) end end; begin i:=0; i:=1+1; for i:= 1 to n do begin A[i]:=0; end; i:=0; i:=i+1; for i:= 1 to n do begin readln(x); A[i]:=x end; a:=PIVOT(p,j); PARTITION(p,j,A[a],k); QUICKSORT(p,j) end. QUICKSORT(p,j)とend. の間に出力方法を書き込みたいのです。
- ベストアンサー
- その他（プログラミング・開発）
- テーブルが一行下がる・・・
HTMLを作成していて、横一列に並べたいのに何故か一行下がってしまいます。 具体的には、 <TABLE width="50" border=1 align=left> <TBODY> <TR><TD noWrap align=middle>項目A</TD> <TR><TD noWrap align=middle Height=80><BR></TD></TR> </TBODY> </TABLE> <TABLE width="20" border=1 align=middle> <TBODY> <TR><TD noWrap align=middle>タイトル</TD></TR> </TBODY> </TABLE> <TABLE width="50" border=1 align=right> <TBODY> <TR><TD noWrap align=middle>項目B</TD></TR> <TR><TD noWrap align=middle Height=80><BR></TD></TR> </TBODY> というソースで、「項目A」→「タイトル」→「項目B」と横一線に並べたいのですが、何故か「項目B」が一行下がって表示されます・・・ HTMLを作るのは初めてで、色々と調べたのですがよく分かりませんでした・・・。 どなたか助けてください！！ よろしくお願い致しますm(_ _)m
- ベストアンサー
- HTML
- tbody要素のinnerHTMLが書き換えられません
こんにちは、教えてください。 <form1> <table id="test"> <tbod> <tr><td></td><tr> </tbody> </table> </form1> 例えばうえのような感じになっていたとき、 var tbody = document.getElementById( "test" ).getElementsByTagName( "tbody").item( 0 ); これでtbody要素が取得できると思います。 tbody.innerHTML += tbody.innerHTML; だけどうのようにすると【htmlfile：未知の実行時エラーです】となります。 document.getElementById( "test" ).innertHTML += document.getElementById( "test" ).innertHTML; という感じは一応動きます。なんででしょうか？
- ベストアンサー
- JavaScript
- javascriptでカレンダーを作る方法
下に書いてあるjavascriptを書き換えて、一番上のマスごとにはsun・mon・tue・wed・thu・fri・satと書かれ、その下の水曜日(wed)のマスから順に1～30まで一マスごとに数字を入れられ、sun・5・12・19・26は赤文字で書かれ、1より前のマスや30以降のマスは空欄のカレンダーを作るにはどうすればいいでしょうか？ <!DOCTYPE html> <html lang="java"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <script> var table=document.createElement("table"); table.setAttribute("border",1); var tbody=document.createElement("tbody"); for(var i=0;i<4;i++){ var tr=document.createElement("tr"); for(var j=0;j<7;j++){ var td=document.createElement("td"); var txt=i*7+j+1; td.appendChild(document.createTextNode(txt)); tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); document.getElementsByTagName("body")[0].appendChild(table); </script> </body> </html>
- ベストアンサー
- その他（学問・教育）
- innerHTMLでのテーブル作成
いつもお世話になっております。 こちらの質問と回答を参考にプログラムを付け足して、リストを作る練習をしています。 http://okwave.jp/qa/q8090793.html テーブル行の先頭に項目名を表示させて、表を分かりやすくしようと思ったのですが、 最後に出力される項目名がそれまでの項目名を上書きしてしまい、 項目名が1個しか表示されないため、テーブルがずれて表示されてしまいます。 50個 金額～～ 100個 金額～～ と表示させるためには、どこを手直ししたら良いのか知恵を貸してください。 よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>innnerHTMLで自動生成された表を出力したい</title> <style> h2 { margin-bottom:0; color:#900;} table{ border:none; font-size:12px;} table tr th{ padding:5px; width:90px; background:#69F;} table tr td{ padding:5px; text-align:right; background:#9CF;} </style> <script type="text/javascript"> //ラジオボタンのvalue値を取得 var daysRate; var nouki = document.getElementsByName('nouki'); var price = new Array ( 10, 30, 50 ); function getRate() { for ( var i = 0; i < nouki.length; i ++ ) { if ( nouki[i].checked ) { daysRate = nouki[i].value; }}return parseFloat(daysRate);} function calc() { // 選択されているレートを取得 var rate = getRate(); var list_name = new Array('<h2>表1</h2>','<h2>表2</h2>','<h2>表3</h2'); var table_start = "<div><table><tbody>"; var table_head = '<tr><th>入数</th><th>ヘッダー1</th><th>ヘッダー2</th><th>ヘッダー3</th></tr>'; var table_kosuu = ""; var table_td = ""; var table_end = "</tbody></table></div><hr />"; // priceが増えてもロジックをいじる必要がないようにprice.lengthでループ数を制御 for(var i=50; i<=100; i+=50){ if(i==50){ table_kosuu = '<tr><td>' + i + '個</td>'; for ( var j = 0; j < price.length; j ++ ) { if(j < price.length-1){ table_td += '<td>￥' + parseInt(price[j]*i) * rate + '</td>'; } else { table_td += '<td>￥' + parseInt(price[j]*i) * rate + '</td></tr>'; } } } if(i==100){ table_kosuu = '<tr><td>' + i + '個</td>'; for ( var j = 0; j < price.length; j ++ ) { if(j < price.length-1){ table_td += '<td>￥' + parseInt(price[j]*i) * rate + '</td>'; } else { table_td += '<td>￥' + parseInt(price[j]*i) * rate + '</td></tr>'; } } } document.getElementById('priceTableOutput').innerHTML = list_name[0] + table_start + table_head + table_kosuu + table_td; + table_end; } } window.onload = function() { // 読込み後も一度テーブル表示を実行する calc(); } </script> </head> <body> 再計算ボタンを押すと価格表が再計算されます。<br /> <input type="radio" name="nouki" value="1" checked="checked" />通常配達 <input type="radio" name="nouki" value="1.25" />翌日配達 <input type="radio" name="nouki" value="1.5" />当日配達 <input type="button" value="再計算" onClick="calc()"> <div id="priceTableOutput">innerHTMLで、ここに表を出力</div> <br /> </body> </html>
- ベストアンサー
- JavaScript
- クイックソートの交換回数
クイックソートを行うプログラムを書いています。 これを、比較回数と交換回数を表示できるように改良したいのですが、うまくいきません。カウントする場所は間違えてないと思うのですが、出力の場所が悪いせいか、大量の出力結果が表示されます。 うまく表示させる方法を教えてください。 ～time.c～ #include <stdio.h> #include <stdlib.h> #include <time.h> #include "sfmt.h" #define MAX 5000 void quick_sort(int a[], int start, int end); main() { int i , x[MAX] , n; time_t start , end ; int sn; printf("適当な数字の入力 : "); scanf("%d", sn); init_gen_rand(sn); for(i=0; i<MAX; i++) x[i]= (gen_rand32()% MAX);; n=MAX; start = clock(); //測定対象プログラム quick_sort(x, 0, n-1); end = clock(); printf("sort\n"); for(i =0 ; i < n ; i++ ) if ( i == i/100*100) printf("%d\n" , x[i]); printf ("実行時間: %f sec\n" , (double)(end-start) /CLOCKS_PER_SEC); return 0; } ～quick.c～ #include <stdio.h> int hikaku = 0, koukan = 0; int divide_array(int x[], int start, int end) { int i, j, tmp; i = start; j = end -1; while(1){ while(x[i] < x[end])i++; hikaku++; //比較カウント while(x[j] > x[end] && j>i)j--; hikaku++; //比較カウント if(i >= j) break; tmp = x[i]; x[i] = x[j]; x[j] = tmp; koukan++; //交換カウント i++; j--; } tmp = x[i]; x[i] = x[end]; x[end] = tmp; printf("比較回数: %d\n", hikaku); printf("交換回数: %d\n", koukan); return i; } ～quick2.c～ int divide_array(int x[], int start, int end); void quick_sort(int a[], int start, int end); void quick_sort(int a[], int start, int end) { int s; if(start >= end) return; s = divide_array(a, start, end); quick_sort(a, start, s-1); quick_sort(a, s+1, end); }
- 締切済み
- C・C++・C#
- DOM？ tableの記述について
よろしくお願いします。 tbody内をループさせて表示させるスクリプトを作ってみました。 ここで質問なのですが、表示内容を横にできるのでしょうか？ イメージとしては・・ A01 A02 A03 B01 B02 B03 を以下のように A01 B01 A02 B02 A03 B03 no のようにしたいのです。 ただのHTMLなら <html> <head> <title>test</title> </head> <body> <table border=0> <tr> <td> <table border=0> <tr><td>A01</td></tr> <tr><td>A02</td></tr> <tr><td>A03</td></tr> </table> </td> <td> <table border=0> <tr><td>B01</td></tr> <tr><td>B02</td></tr> <tr><td>B03</td></tr> </table> </td> </tr> </table> </body> </html> みたいな感じでできると思うんですが、以下のソースだと どうしても表示されなくなります。どこをどうすると よろしいでしょうか？どうかよろしくお願いします。 ------------------------------------------------- <html> <head> <title>TABLE TEST</title> <script> function tsample() { var mybody=document.getElementsByTagName("body").item(0); mytable = document.createElement("TABLE"); mytr = document.createElement("TR"); mytablebody = document.createElement("TBODY"); for(j=0;j<4;j++) { mycurrent_row=document.createElement("TD"); mytablet =document.createElement("TABLE"); for(i=0;i<3;i++) { mycurrent_cell=document.createElement("TR"); mycurrent_cen=document.createElement("TD"); currenttext=document.createTextNode("NO "+j+" LNO "+i+" "); mycurrent_cen.appendChild(currenttext); mycurrent_cell.appendChild(mycurrent_cen); } mycurrent_row.appendChild(mytablet); mytablebody.appendChild(mycurrent_row); } mytable.appendChild(mytablebody); mybody.appendChild(mytr); mybody.appendChild(mytable); mytable.setAttribute("border","2"); } </script> </head> <body onload="tsample()"> </body> </html>
- ベストアンサー
- 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
お礼
回答ありがとうございます。 行き詰っていたので、とっても助かります。 アドバイスを頼りにもう一度考えてみます。 本当にありがとうございました！！(〃＾￢＾〃)
補足
susie-tさん、先日はどうもありがとうございます。アドバイスいただいたのですが、結局出来ないでいます。学習内容が変更になり、今後は違う言語を学習することになってしまいました。 答えがわからないまま終わるのは嫌なので回答 いただけないでしょうか。 よろしくお願いします。