如何添加<；tr>；标记到<；表>；在纯javascript中动态标记？_Javascript

如何添加<；tr>；标记到<；表>；在纯javascript中动态标记？

javascript

如何添加<；tr>；标记到<；表>；在纯javascript中动态标记？,javascript,Javascript,html文件中的代码如下所示： <html> <script type="text/javascript"> var records=[{"name":"Fred","id":"123"},{"name":"Jim","id":"456"}]; </script> <table id="tb1"> <tr id="row1"> <td style="ba

html文件中的代码如下所示：

<html>
    <script type="text/javascript">
       var records=[{"name":"Fred","id":"123"},{"name":"Jim","id":"456"}];
    </script>
    <table id="tb1">
        <tr id="row1">
            <td style="background-color:gray" id="name">name</td><td style="background-color:gray" id="id">id</td>
        </tr>
        <tr id="row2"><td>shouldn't be added here</td><td>neither here</td></tr>
    </table>
</html>


var记录=[{“name”：“Fred”，“id”：“123”}，{“name”：“Jim”，“id”：“456”}]；
名字
不应该添加到此处，也不应该添加到此处

我想用纯javascript在第1行和第2行之间添加记录的内容。（没有任何第三方javascript框架）我该怎么办？

您不添加到“标记”，而是添加到元素

在一般情况下，可以通过（或通过将包含HTML的字符串分配给现有元素的

innerHTML

属性）创建元素

可以使用或将元素添加为其他元素的子元素

例如，您可以在表中的

id=“row2”

之前添加包含两个表单元格的行：

var newRow = document.createElement('tr');
newRow.appendChild(document.createElement('td')); // The first cell
newRow.appendChild(document.createElement('td')); // The second cell
var row2 = document.getElementById("row2");
row2.parentNode.insertBefore(newRow, row2);       // Insert it

但是，对于表，您可以使用一些具体的方法来代替，这些方法不太详细：

关于表格和tbody/thead元素
关于行元素

下面是上面使用

insertCell

的代码：

var newRow = document.createElement('tr');
newRow.insertCell(-1);                            // The first cell
newRow.insertCell(-1);                            // The second cell
var row2 = document.getElementById("row2");
row2.parentNode.insertBefore(newRow, row2);       // Insert it

我们也可以使用

insertRow

：

var row2 = document.getElementById("row2");            // Get existing row
var newRow = row2.parentNode.insertRow(row2.rowIndex); // Create and insert new row
newRow.insertCell();                                   // The first cell
newRow.insertCell();                                   // The second cell

…但是我们会重复地对显示的DOM进行更改（添加一个空行，然后添加一个单元格，然后添加另一个单元格），如果可能的话，最好避免这样做。在前两个示例中，我们创建了行并添加了其单元格，然后将整个结构添加到DOM中，执行oneliveDOM操作

domapi可能比较冗长，也有点笨拙，而且它的实现可能会因浏览器而异（尽管以上所有内容都是可靠的）。显然，您可以直接使用它，但是您也可以使用几个好的JavaScript DOM操纵库中的任何一个来为您整理一些与浏览器兼容的内容，并获得许多有用的实用程序功能。

您不添加到“标记”，而是添加到元素

在一般情况下，可以通过（或通过将包含HTML的字符串分配给现有元素的

innerHTML

属性）创建元素

可以使用或将元素添加为其他元素的子元素

例如，您可以在表中的

id=“row2”

之前添加包含两个表单元格的行：

var newRow = document.createElement('tr');
newRow.appendChild(document.createElement('td')); // The first cell
newRow.appendChild(document.createElement('td')); // The second cell
var row2 = document.getElementById("row2");
row2.parentNode.insertBefore(newRow, row2);       // Insert it

但是，对于表，您可以使用一些具体的方法来代替，这些方法不太详细：

关于表格和tbody/thead元素
关于行元素

下面是上面使用

insertCell

的代码：

var newRow = document.createElement('tr');
newRow.insertCell(-1);                            // The first cell
newRow.insertCell(-1);                            // The second cell
var row2 = document.getElementById("row2");
row2.parentNode.insertBefore(newRow, row2);       // Insert it

我们也可以使用

insertRow

：

var row2 = document.getElementById("row2");            // Get existing row
var newRow = row2.parentNode.insertRow(row2.rowIndex); // Create and insert new row
newRow.insertCell();                                   // The first cell
newRow.insertCell();                                   // The second cell

domapi可能比较冗长，也有点笨拙，而且它的实现可能会因浏览器而异（尽管以上所有内容都是可靠的）。显然，您可以直接使用它，但您也可以使用几个好的JavaScript DOM操纵库中的任何一个来为您整理一些与浏览器兼容的内容，并获得许多有用的实用程序功能。

使用方法，干净且精确

var row = table.insertRow(0); // to insert in the top OR
var row = table.insertRow(N); // to insert in the (N+1)-th line of the table OR
var row = table.insertRow(-1); // to insert in the bottom

使用方法，干净、准确

var row = table.insertRow(0); // to insert in the top OR
var row = table.insertRow(N); // to insert in the (N+1)-th line of the table OR
var row = table.insertRow(-1); // to insert in the bottom

你试过什么了吗？首先，他写了一个格式错误的JSON

{{“name”：“Jim”，“id”：“456”}

：P@AnilShanbhag：这不是JSON。它的格式不正确。：-）上下文为王，这是一个JavaScript对象初始值设定项（或者无论如何都是），因为它在JavaScript代码中。@AnilShanbhag建议已被接受：）您尝试了什么吗？首先，他编写了一个格式错误的JSON

{{“name”：“Jim”，“id”：“456”}

：P@AnilShanbhag：这不是JSON。它的格式不正确。：-）Context为王，这是一个JavaScript对象初始值设定项（或者无论如何都是），因为它在JavaScript代码中。@AnilShanbhag建议已接受：）将包含HTML的字符串分配给现有元素的innerHTML属性，这是我更喜欢的方式，但是，我如何确保包含我要添加的html标记的内容字符串在id=“row1”和id=“row2”之间。@kenshinji：您需要创建row元素，将单元格的标记分配给

innerHTML

，然后将row元素插入表中。但是，在表和

innerHTML

之间存在浏览器不一致的问题，一个好的库可以为您处理这些问题。旁注：最好在

表

和行之间使用

tbody

元素（某些浏览器可能会自动插入）。我在上面使用了

row2.parentNode

来回避可能的问题。您只需使用insertRow方法即可<代码>变量行=表。插入行（0）；//在顶部插入变量行=表。插入行（-1）；//要在底部插入将包含HTML的字符串指定给现有元素的innerHTML属性，这是我喜欢的方式，但如何确保包含我要添加的HTML标记的内容字符串将位于id=“row1”和id=“row2”之间。@kenshinji：您应该创建row元素，将单元格的标记指定给

innerHTML

，然后将行元素插入表中。但是，在表和

innerHTML

之间存在浏览器不一致的问题，一个好的库可以为您处理这些问题。旁注：最好在

表

和行之间使用

tbody

元素（某些浏览器可能会自动插入）。我在上面使用了

row2.parentNode

来回避可能的问题。您只需使用insertRow方法即可<代码>变量行=表。插入行（0）；//在顶部插入变量行=表。插入行（-1）；//在底部插入

insertRow

绝对方便，但对于OP的示例来说，这将是一个糟糕的选择，因为您将重复修改显示的DOM。在t中更好