使用Javascript向表中添加行_Javascript_Html

使用Javascript向表中添加行

javascript html

使用Javascript向表中添加行,javascript,html,Javascript,Html,我只是在做一个Javascript练习，应该在表中添加一行。Html的内容如下： <!DOCTYPE html> <html><head><br><meta charset=utf-8 /> </head><body> <table id="sampleTable" border="1"> <tr><td>Row1 cell1</td> <

我只是在做一个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>

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

您从未将行添加到表中。它不依附于任何东西。您需要使用或

var table=document.getElementByIdsampleTable， tbody=table.getElementsByTagNametbody[0]；对于var i=0；i您的xTable.createElement没有创建任何子元素。实际方法是document.createElement。没有element.createElement

同样，parentnode.children仅访问作为表元素tBody元素的直接子元素的元素。因此，parentnode.children.length在这里等于1。但在添加另一个tr元素后，它将增加，因为它没有添加到tBody元素。因此，它使for循环无限。我将在稍后讨论它

此外，您还必须使用element.appendChild方法来显示所需的子对象已创建。若要添加表单元格，请不要使用innerHTML，而是使用

代码中的for循环变得无限大，因为在向表中添加一个tr元素后，xTable.children.length增加了一个。因此，每次执行for循环时，它都会发现长度增加了，并且在添加另一个tr元素后，长度再次增加。所以，它永远不会有机会中断。从而成为无限循环。所以在使用for循环向表中添加元素时要小心

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

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

桌子很特别。它们有特殊的可选方法来添加子对象。表has和TR has。如果要将行/单元格添加到非末尾的某个位置，则它们特别有用

设置TR的innerHTML应该适用于大多数浏览器，但可能不是所有浏览器

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

执行过程中的第一个错误是，您试图调用xTable.createElement。元素节点有一个createElement方法；文档节点会这样做，所以您需要使用document.createElement'tr'来代替。为了处理新创建的元素，需要将其返回值赋给变量

此外，还需要将元素添加到文档树中。如果将其添加到表中，则会出现问题。您有一个遍历表中所有子项的循环，添加一个新的子项将使循环无限大。实际上根本不需要循环。要查找最后一个子项，不需要遍历所有子项；您只需使用childrence.length属性。但你甚至不需要这些；要追加一行，而不是真正插入，只需调用预期父对象的appendChild方法

还有更多。严格来说，在HTML中，仅在HTML线性化中，而不是在XHTML线性化中，tr元素不是表的子元素。浏览器将在需要时插入tbody元素，以便tr是tbody的子元素，tbody是表的子元素。这意味着xTable.childrence.length的值为1；这个表只有一个子元素，一个tbody元素

因此，在第一个代码中使用这种方法可以正确地编码如下：

第1行第1单元第1行第2单元第2行第1单元第2行第2单元函数插入_行{ var xTable=document.getElementById'sampleTable'； var tr=document.createElement'tr'； tr.innerHTML='cell1cell2'； xTable.children[0].appendChildtr；//追加到tbody元素 }

[stackoverflow.com-adding-tr-to-a-table-with-appendchild][1][1]：[1]：@adminez查看帮助链接以了解如何在注释中发布链接，这与answering.xTable.children.length不同。对于第一种情况，它是一个。但是在附加另一个tr元素后，它将增加一个。因为tr不会添加到tbody。如果tr添加到当前tbody元素，它每次都将保持一个

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";
}

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

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