Question

我写了一个包含两个表的脚本：tbl1是一个主表，tbl2是第二个表，我希望通过插入tbl1第二行纯JavaScript 。它工作得很好，但我的tbl2有一些html attribute，当我看到插入后的代码时没有看到注意：tbl1和tbl2都是相同的列标题，并且有两列。

function inserttbl2() {
    var table = document.getElementById("tbl1");
    var row = table.insertRow(1);
    var celltr = row.insertCell(0);
    row.innerHTML = document.getElementById("tbl2").outerHTML;
}

.myclass{
background-color: green;
color: white;
}

<!DOCTYPE html>
<html>

<body>

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<table id="tbl1">
  <tr>
    <td>table 1</td>
    <td>table 1</td>
  </tr>
  <tr>
    <td>table 1</td>
    <td>table 1</td>
  </tr>
</table>

<br />
<button onclick="inserttbl2()">Insert</button>
<br />

<table id='tbl2' class='myclass'>
<tr>
<td>table 2</td>
<td>table 2</td>
</tr>
</table>

</body>
</html>

如您所见，tbl2没有<table id=....>

Answer 1

您可以针对您的情况使用常规appendChild，例如：

function inserttbl2() {
    var table = document.getElementById("tbl1");
    var row = table.insertRow(1);
    var celltr = row.insertCell(0);
    row.appendChild(document.getElementById("tbl2"));
}

.myclass{
background-color: green;
color: white;
}

<!DOCTYPE html>
<html>

<body>

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<table id="tbl1">
  <tr>
    <td>table 1</td>
    <td>table 1</td>
  </tr>
  <tr>
    <td>table 1</td>
    <td>table 1</td>
  </tr>
</table>

<br />
<button onclick="inserttbl2()">Insert</button>
<br />

<table id='tbl2' class='myclass'>
<tr>
<td>table 2</td>
<td>table 2</td>
</tr>
</table>

</body>
</html>

它将在第一个表格中插入完整的第二个表格。

在一行中插入表

1 个答案: