将表格插入行中

本文介绍了将表格插入行中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我编写了一个包含两个表的脚本: 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.

                        这篇关于将表格插入行中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！