我只是在做一个 Javascript 练习，应该在表中添加一行。 Html 如下所示:
<!DOCTYPE html>
<html><head><br><meta charset=utf-8 />
</head><body>
<table id="sampleTable" border="1">
<tr><td>Row1 cell1</td>
<td>Row1 cell2</td></tr>
<tr><td>Row2 cell1</td>
<td>Row2 cell2</td></tr>
</table><br>
<input type="button" onclick="insert_Row()" value="Insert row">
</body></html>
我的脚本不起作用:
function insert_Row(){
var xTable=document.getElementById('sampleTable');
for (i=0;i<=xTable.children.length;i++)
{
if(i===xTable.children.length)
{
xTable.createElement('tr');
tr.innerHTML ='<td>cell1</td><td>cell2</td>'
}
}
}
这是正确的解决方案:
function insert_Row()
{
var x=document.getElementById('sampleTable').insertRow(0);
var y = x.insertCell(0);
var z = x.insertCell(1);
y.innerHTML="New Cell1";
z.innerHTML="New Cell2";
}
我想了解我的第一个解决方案有什么问题？为什么它不创建标签而是抛出错误？
最佳答案
您永远不会将该行添加到表中。 createElement不依附于任何东西。您需要使用appendChild()或insertBefore()
var table = document.getElementById("sampleTable"),
tbody = table.getElementsByTagName("tbody")[0];
for (var i=0;i<5;i++) {
var row = document.createElement("tr");
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
cell1.innerHTML = i + "- 1";
cell2.innerHTML = i + "- 2";
row.appendChild(cell1);
row.appendChild(cell2);
tbody.appendChild(row);
}<table id="sampleTable" border="1">
<tbody>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</tbody>
</table>关于javascript - 使用 Javascript 将行添加到表中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28010666/