こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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>

投稿日時 - 2007-07-18 16:42:56

QNo.3178709

困ってます

質問者が選んだベストアンサー

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 );
  }

投稿日時 - 2007-07-19 08:04:51

お礼

redfox63さん、書き込みありがとうございます。
わかりやすいソースを記述してもらって感謝します。
無事理想の動きが出来ました。

このように分けて記述すること自体全く浮かんでこなかった
でした、やはり経験なんでしょうね。
今後同じようなことがあったら、今回の件を活かしていきたいと
思います。本当にありがとうござました。
また何かありましたら、よろしくお願いします。
もっと勉強していきます。

投稿日時 - 2007-07-19 09:52:59

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

とりあえずわかりやすかった1カ所だけ。

最終的に作りたいテーブル(tableタグ)は
一番外側の部分と、
A01、A02、A03を入れる1つ、
B01、B02、B03を入れる1つ、
合計3つですよね。

最初に
> mytable = document.createElement("TABLE");
を作って、
> for(j=0;j<4;j++) {
このループの中で
> mytablet =document.createElement("TABLE");
ですから、4つ作っています。(合計5つ)

そういうミスを見直して、
どのタグにどのタグをappendChildするかを見直して、
最初に書いたテーブルが作れるようなループを作れば、思うとおりの表示になると思います。

投稿日時 - 2007-07-18 22:42:00

お礼

talooさん、書き込みありがとうございます。
確かに、こういう記述ミスを見直ししながら、
またケースを作って今後がんばってやっていきます。
ありがとうございます。

投稿日時 - 2007-07-19 09:47:09