Question

我正在做一个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";
}

我想了解我的第一个解决方案有什么问题？为什么它不创建标签但反而抛出错误？

Answer 1

您永远不会将该行添加到表中。 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>

Answer 2

您的xTable.createElement未创建任何子元素。实际方法为document.createElement()。没有element.createElement

再次parentnode.children只访问表元素的直接子元素tBody元素。因此，parentnode.children.length此处等于1。但是在添加后它会增加另一个tr元素，因为它没有被添加到tbody元素。 因此它使for循环无限 。我将很快讨论它。

你还必须使用element.appendChild()方法来帮助孩子已经创建了。要添加表格单元格，请不要使用innerHTML 使用dom methods to do this things for you

代码中的for循环正在无限，因为在您的表中添加了一个 tr 元素后，xTable.children.length增加1。因此，每次执行for循环时，它会发现长度增加，并且在添加另一个tr元素后，它再次增加。所以，它永远不会有任何机会打破。因此成为无限循环。当使用for循环向表中添加元素时要小心

  var xTable=document.getElementById('sampleTable');

      var tr=document.createElement('tr');
      tr.innerHTML ='<td>cell1</td><td>cell2</td>'
      xTable.appendChild(tr);

Answer 3

执行中的第一个错误是您尝试调用xTable.createElement。元素节点确实有createElement方法;文档节点，所以你需要使用document.createElement('tr')。并且您需要将其返回值分配给变量，以便对新创建的元素执行任何操作。

此外，您需要将元素添加到文档树中。如果将其添加到表中，则存在问题。你有循环遍历表的所有子项，并附加一个新的子将使循环无限。实际上根本不需要循环。要找到最后一个孩子，你不需要遍历所有孩子;你只需使用children.length属性。但你甚至不需要那个;要追加一行（这是你在这里做的，而不是真正插入），你只需调用预期父母的appendChild方法。

还有更多。在HTML中（严格来说，仅在HTML线性化中，而不是在XHTML线性化中），tr元素不是table的子元素。浏览器会在需要时插入tbody元素，以便tr是tbody的孩子，table是xTable.children.length的孩子。这意味着tbody的值为1;该表只有一个子元素<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> <p><input type="button" onclick="insert_Row()" value="Insert row"> <script> function insert_Row(){ var xTable = document.getElementById('sampleTable'); var tr = document.createElement('tr'); tr.innerHTML = '<td>cell1</td><td>cell2</td>'; xTable.children[0].appendChild(tr); // appends to the tbody element } </script>元素。

因此，使用第一个代码中的方法可以按如下方式正确编码：

＆＃13;

{{1}}

＆＃13;

Answer 4

表格很特别。他们有特殊（可选）的方法来添加孩子。 TABLE有insertRow，TR有insertCell。如果你想将行/单元格添加到最后的某个位置，它们会特别有用。

设置TR的{{1}}应该适用于大多数浏览器，但可能并非全部。

（如果您要构建整个表，请在JS中创建HTML，然后设置innerHTML。这比创建单独的innerHTML和TR要快得多。）

使用Javascript向表添加行

4 个答案: