0

JavaScriptを使用してテーブルをレンダリングしようとしています。以下はhtmlとjavascriptです。JavaScript で HTML を使用して描画するのと同じテーブルを描画するのに苦労しています。ただし、スクリプトはレンダリングされないようです。

       <!DOCTYPE html>

 <html>

<head>


</head>


<body>

    <table width = "50%" border = "1" align = "center">
        <thead> 
            <th>ONE</th>
            <th>TWO</th>
            <th>THREE</th>
        </thead>            
        <tbody>
        <tr>
            <td>r1c1</td>
            <td>r1c2</td>
            <td>r1c3</td>
        </tr>
        <tr>
            <td>r2c1</td>
            <td>r2c2</td>
            <td>r2c3</td>
        </tr>
        </tbody>


    </table> 

</body>

<script type = "text/javascript">
    var table = document.createElement("table");
    table.width = "50%";
    table.border = "1";
    table.align = "center";


    //create the table header
    var thead = document.createElement("thead");
    table.appendChild(thead);

    //create the cells inside thead
    thead.insertRow(0);
    thead.rows[0].insertCell(0);
    thead.rows[0].cells[0].appendChild(document.createTextNode("ONE"));
    thead.rows[0].insertCell(1);
    thead.rows[0].cells[1].appendChild(document.createTextNode("TWO"));
    thead.rows[0].insertCell(2);
    thead.rows[0].cells[2].appendChild(document.createTextNode("THREE"));

    //create the table body
    var tbody = document.createElement("tbody");
    table.appendChild(tbody);

    //create the cells inside tbody
    tbody.insertRow(0);//do you start from zero here or 1?
    tbody.rows[0].insertCell(0);
    tbody.rows[0].cells[0].appendChild(document.createTextNode("r1c1"));
    tbody.rows[0].insertCell(1);
    tbody.rows[0].cells[1].appendChild(document.createTextNode("r1c2"));
    tbody.rows[0].insertCell(2);
    tbody.rows[0].cells[2].appendChild(document.createTextNode("r1c3")); 
    //now we make the 2nd row
    tbody.insertRow(1);
    tbody.rows[1].insertCell(0);
    tbody.rows[1].cells[0].appendChild(document.createTextNode("r2c1"));
    tbody.rows[1].insertCell(1);
    tbody.rows[1].cells[1].appendChild(document.createTextNode("r2c2"));
    tbody.rows[1].insertCell(2);
    tbody.rows[1].cells[2].appendChild(document.createTextNode("r2c3")); 
    //now we make the third row
    tbody.insertRow(2);
    tbody.rows[2].insertCell(0);
    tbody.rows[2].cells[0].appendChild(document.createTextNode("r3c1"));
    tbody.rows[2].insertCell(1);
    tbody.rows[2].cells[1].appendChild(document.createTextNode("r3c2"));
    tbody.rows[2].insertCell(2);
    tbody.rows[2].cells[2].appendChild(document.createTextNode("r3c3")); 

</script>
</html>

2 番目のテーブルを表示するにはどうすればよいですか? コードのどの部分が間違っていますか? 私は意図的に DOM メソッドを使用していません。

ありがたく悲しい

4

1 に答える 1

0

エラー：

要素を作成しましたが、本体に追加していません。

document.getElementsByTagName("body")[0].appendChild(table);

別の解決策:

jQuery を使用できる場合は、はるかに単純で簡単になります。

<script type = "text/javascript">
    var table = $("<table>", {width: '50%', border: 1, align: 'center'});

    //create the cells inside thead
    var row = $("<tr />").append("<th>One</th>").append("<th>Two</th>").append("<th>Three</th>");
  //create the table header

  var thead = $("<thead />").append(row);
    table.append(thead);

    //create the table body
  var tbody = $("<tbody />");

    //create the cells inside tbody
    var r1 = $("<tr />").html("<td>r1c1</td><td>r1c2</td><td>r1c3</td>");
    tbody.append(r1);

    //now we make the 2nd row
    var r2 = $("<tr />").html("<td>r2c1</td><td>r2c2</td><td>r2c3</td>");
    tbody.append(r2);

    //now we make the third row
    var r3 = $("<tr />").html("<td>r3c1</td><td>r3c2</td><td>r3c3</td>");
    tbody.append(r3);

    table.append(tbody);
    $("body").append(table);

</script>

CSS

th {font-weight: bold; text-align: center;}

フィドル: http://jsfiddle.net/FWGsk/1/

于 2013-01-16T10:46:56.583 に答える