我尝试使用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方法。
感激 Saad的
答案 0 :(得分：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>
th {font-weight: bold; text-align: center;}