- ベストアンサー
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>
- hajimete-san
- お礼率60% (35/58)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
TBODYタグに TRタグをappendChildしないといけないようです 内側のテーブルを作成する関数と外側のテーブルを作成する関数を分けたほうが原因を探りやすいですよ # 字下げは全角スペースです // 内側のテーブル function makeSub(i) { var myTable = document.createElement("TABLE"); var myBody = document.createElement("TBODY"); for( var j=1; j<3; j++ ) { var myTr = document.createElement("TR"); var myTd = document.createElement("TD"); myTd.innerText = "No " + i.toString() + " LNO" + j.toString(); myTr.appendChild( myTd ); myBody.appendChild( myTr ); } myTable.appendChild( myBody ); // document.body.appendChild( myTable ); // myTable.setAttribute("border","2"); return myTable; } // 外側のテーブル function makeMain() { var myTable = document.createElement("TABLE"); var myBody = document.createElement("TBODY"); var myTr = document.createElement("TR"); for ( var i = 1; i< 5; i++ ) { var myTd = document.createElement("TD"); // myTd.innerText = "123 " + i.toString(); myTd.appendChild( makeSub(i) ); myTr.appendChild( myTd ); } myBody.appendChild( myTr ); myTable.appendChild( myBody ); myTable.setAttribute( "border", "2"); document.body.appendChild( myTable ); }
その他の回答 (1)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
とりあえずわかりやすかった１カ所だけ。 最終的に作りたいテーブル（tableタグ）は 一番外側の部分と、 A01、A02、A03を入れる１つ、 B01、B02、B03を入れる１つ、 合計３つですよね。 最初に > mytable = document.createElement("TABLE"); を作って、 > for(j=0;j<4;j++) { このループの中で > mytablet =document.createElement("TABLE"); ですから、4つ作っています。（合計５つ） そういうミスを見直して、 どのタグにどのタグをappendChildするかを見直して、 最初に書いたテーブルが作れるようなループを作れば、思うとおりの表示になると思います。
お礼
talooさん、書き込みありがとうございます。 確かに、こういう記述ミスを見直ししながら、 またケースを作って今後がんばってやっていきます。 ありがとうございます。
お礼
redfox63さん、書き込みありがとうございます。 わかりやすいソースを記述してもらって感謝します。 無事理想の動きが出来ました。 このように分けて記述すること自体全く浮かんでこなかった でした、やはり経験なんでしょうね。 今後同じようなことがあったら、今回の件を活かしていきたいと 思います。本当にありがとうござました。 また何かありましたら、よろしくお願いします。 もっと勉強していきます。