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>

如何显示第二张桌子？我的代码的哪些部分是错误的？我故意不使用 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 回答