将表格插入行中 [英] Insert Table Inside a Row
问题描述
我编写了一个包含两个表的脚本: tbl1 是主表， tbl2 是第二个表，我想将其插入到 tbl1 纯JavaScript 代码第二行.它工作正常，但是我的 tbl2 具有一些 html属性，插入
后看到代码时看不到注释: tbl1 和 tbl2 都是相同的列标题，并且有两列.
I wrote a script which contain two tables: tbl1 is a main table, tbl2 is a second table which I want to insert into a tbl1 second row by using Pure JavaScript. It work perfectly, but my tbl2 have some html attribute, it doesn't seen when i saw the code after inserted
note: tbl1 and tbl2 both are same column header and there have two columns.
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 没有<表id =....>
As you see, the tbl2 doesn't have a <table id=....>
推荐答案
对于您的案例，您可以使用常规的 appendChild ，
You can use the regular appendChild for your case, like this:
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>它将在第一个表中插入完整的第二个表.
It will insert full second table inside the first.
这篇关于将表格插入行中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
