DOMでTABLE作成

[新着] Webテンプレートを仮オープンしました

0   名前： TaRou ： 2007/03/28（水） 08:07  ID:w2O28KyE sub-t1
DOMを使ってTABLEをつくっているのですが、画面に表示されません。
どの部分が間違っているのか分かりません。
使っているのはWindowsXPでIE6です。
表は縦三行、横三行です。

<html>
<head>
<title>TEST</title>
<script type="text/javascript"><!--
window.onload = function(){

var windowTable = document.createElement('TABLE');

for(var r1=0; r1<3; r1++){windowTable.appendChild(document.createElement('TR'));}
for(var r2=0; r2<3; r2++){
for(var r3=0; r3<3; r3++){windowTable.childNodes[r2].appendChild(document.createElement('TD'));}
}

windowTable.id = 'Table Sample';
windowTable.style.borderCollapse = 'collapse';
windowTable.style.width = '300px';
windowTable.style.height = '200px';

windowTable.childNodes[0].style.backgroundColor = 'blue';
windowTable.childNodes[0].style.width = '100%';
windowTable.childNodes[0].style.height = '30px';
windowTable.childNodes[0].childNodes[0].style.width = '1px';
windowTable.childNodes[0].childNodes[2].style.width = '1px';

windowTable.childNodes[1].childNodes[0].style.backgroundColor = 'blue';
windowTable.childNodes[1].childNodes[1].style.verticalAlign = 'top';
windowTable.childNodes[1].childNodes[2].style.backgroundColor = 'blue';

windowTable.childNodes[2].style.backgroundColor = 'blue';
windowTable.childNodes[2].style.height = '3px';

document.body.appendChild(windowTable);

}

// --></script>

</head>
<body>
<hr>
</body>
</html>
1   名前： 匿名 ： 2007/03/28（水） 08:07  ID:6fAvcTJO sub-kJ
> どの部分が間違っているのか分かりません。

HTML の table 要素の説明をもう一度読み直すんだ。

はっきり言って >>0 は HTML でも XHTML でもない不可思議なマークアップ言語なんだが、もし仮に HTML 4.01 だとするならば、

・table 要素の直下に置けるのは、caption|col|colgroup|thead|tfoot|tbody 要素のみ。
・table 要素の直下には、tbody 要素が必ず 1 つ以上存在しなければならない。

だから、まず table 要素の下に tbody 要素を置かねばならない。
http://msdn.microsoft.com/workshop/author/tables/buildtables.asp


なお、XHTML 1.0 ならば、tbody 要素は省略可能であり、table 要素の直下に tr 要素を置くことができる。それゆえ、Table Object Model を使うなら、appendChild() より insertRow() を使う方が良い。tbody 要素が必要かどうかを DOM 実装が適当に判断して、必要なら自動的に作成してくれる。
2   名前： 匿名 ： 2007/03/28（水） 08:07  ID:6fAvcTJO sub-kJ
すまん、>>1 は我ながら嫌味な文体だった。

補足しておくと、DOM Core だけで頑張る場合、HTML の文法、特にデフォルト値・デフォルト内容の有無には注意しなければならない（DOM Core は、生成したデータの妥当性までは検証してくれない）。ちなみに、下記は妥当な HTML なのだが、どこに何の要素が存在しており、どのようにタグが省略されているか、お分かりだろうか。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>TEST</title>
<script type="text/javascript">

if (document.implementation &&
    document.implementation.hasFeature ('Core', '1.0'))

onload = function () {
    var table = document.createElement ('table');
    var tbody = table.appendChild (document.createElement ('tbody'));
    
    for (var i = 0; i < 3; i++) {
        var row = tbody.appendChild (document.createElement ('tr'));
        
        for (var j = 0; j < 3; i++) {
            var cell = row.appendChild (document.createElement ('td'));
            cell.appendChild (document.createTextNode ('TEST'));
        }
    }
    table.childNodes[0].childNodes[1].childNodes[1].style.background = 'blue';
    document.body.appendChild (table);
}
</script>

DOM HTML では、表の操作のための特別なインタフェースが用意されている。複雑な表には力不足だが、簡単な表を作るときは便利。特に insertRow() は、tbody 要素が必要な場合に自動的に作成し、その中に tr 要素を生成してくれる。
http://www2u.biglobe.ne.jp/%7Eoz-07ams/prog/dom-ref/HTML/HTMLTableElement.html#HTMLTableElement-insertRow
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>TEST</title>
<script type="text/javascript">

if (document.implementation &&
    document.implementation.hasFeature ('HTML', '1.0'))

onload = function () {
    var table = document.createElement ('table');
    
    for (var i = 0; i < 3; i++) {
        var row = table.insertRow (i);
        
        for (var j = 0; j < 3; i++) {
            var cell = row.insertCell (j);
            cell.appendChild (document.createTextNode ('TEST'));
        }
    }
    table.rows[1].cells[1].style.background = 'blue';
    document.body.appendChild (table);
}
</script>
3   名前： TaRou ： 2007/03/28（水） 08:07  ID:w2O28KyE sub-t1
匿名さん、助言ありがとうございます。
とりあえずtbodyをいれてみようと思います。
4   名前： TaRou ： 2007/03/28（水） 08:07  ID:w2O28KyE sub-t1
tbodyを入れるとできました。
匿名さん、ありがとうございました。
一覧へ戻る