Javascript .appendChild(tableA) 将表格移动到单个单元格中。

Question

我在 Javascript 中有两个表。

    <table  class="fHTML5" >

        <!-- TABLE HEADER-->
        <thead>
           <tr><td colspan=15>Mass Table - </td></tr>
            <tr id="RowHead">
                <th>ID</th><th>P Load (N)</th>
            </tr>
        </thead>
        <tbody id="CTable" >

        </tbody>
     </table>

Example Output
===============
| ID | P Load |
---------------
|  1 |   700  |
|  2 |   800  |
---------------

还有这张表:

    <table  class="fHTML5" >

        <!-- TABLE HEADER-->
        <thead>
           <tr><td colspan=15>Mass Table - </td></tr>
            <tr id="RowHead">
                <th>ID</th><th>P Load (N)</th>
            </tr>
        </thead>
        <tbody id="BTable" >

        </tbody>
     </table>

Example Output
===============
| ID | P Load |
---------------
|  1 |   100  |
|  2 |   500  |
---------------

我希望使用此命令将 CTable 的主体复制到 BTable 中。

this.BTable.appendChild(this.CTable); 

然而，当我尝试这个时，我得到以下输出:

Example Output
==========================
| ID            | P Load |
--------------------------
|  1            |   100  |
|  2            |   500  |
|  1  | 700     |
|  2  | 800     |
-----------------

而不是(这就是我要找的):

================
| ID  | P Load |
----------------
|  1  |   100  |
|  2  |   500  |
|  1  |   700  |
|  2  |   800  |
-----------------

基本上，appendChild 命令将整个表加载到第一个单元格中。是否有一个 Javascript 对象/函数可以将类似的表附加在一起，或者我是否必须手动编码读取行并插入行？谢谢

(注意:有几个与之前问过的问题类似的问题，但没有一个是我设法开始工作的，只有在 JS 中找到的解决方案)

Answer 1

您要求浏览器将一个 tbody 元素放在 另一个 tbody 元素中。它不能那样做，所以它会做下一个最好的事情(这可能因浏览器而异)。

如果你想把 CTable 放在 BTable 之后(仍然在同一个表中，只是移动 tbody ), 使用 insertBefore :

this.BTable.parentNode.insertBefore(this.CTable, this.BTable.nextSibling);

document.querySelector("input[type=button]").addEventListener(
  "click",
  function() {
    this.BTable.parentNode.insertBefore(this.CTable, this.BTable.nextSibling);
  }.bind(this),
  false
);

.fHTML5,
.fHTML5 td {
  border: 1px solid #ddd;
}

<input type="button" value="Click To Move">
<table class="fHTML5">

  <!-- TABLE HEADER-->
  <thead>
    <tr>
      <td colspan=15>Mass Table -</td>
    </tr>
    <tr id="RowHead">
      <th>ID</th>
      <th>P Load (N)</th>
    </tr>
  </thead>
  <tbody id="CTable">
    <tr>
      <td>1</td>
      <td>700 - in CTable</td>
    </tr>
    <tr>
      <td>2</td>
      <td>800 - in CTable</td>
    </tr>
  </tbody>
</table>

<table class="fHTML5">
  <!-- TABLE HEADER-->
  <thead>
    <tr>
      <td colspan=15>Mass Table -</td>
    </tr>
    <tr id="RowHead">
      <th>ID</th>
      <th>P Load (N)</th>
    </tr>
  </thead>
  <tbody id="BTable">
    <tr>
      <td>A</td>
      <td>In BTable</td>
    </tr>
    <tr>
      <td>B</td>
      <td>In BTable</td>
    </tr>
  </tbody>
</table>