将表格插入行内

aso 发表于 Dev

麻生

我编写了一个包含两个表的脚本：tbl1是主表，tbl2是第二个表，我想tbl1通过使用Pure 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=....>

商业自杀

您可以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>

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。