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对象/函数将像minded表一样追加或者我是否必须手动编写读取行并插入行？感谢

（注意：之前有一些类似的问题，但我没有设法开始工作，只有JS中的解决方案）

Answer 1

您可以尝试将CTable中的所有行插入BTable。

doc.ExportAsFixedFormat(path, WdExportFormat.wdExportFormatPDF, Item: WdExportItem.wdExportDocumentWithMarkup, CreateBookmarks: WdExportCreateBookmarks.wdExportCreateHeadingBookmarks, 
            Range: WdExportRange.wdExportFromTo, From: 1, To: 1);

Answer 2

您要求浏览器将tbody元素置于另一个tbody元素中。它不能做到这一点，所以它做了它的下一个最好的事情（可能因浏览器而异）。

如果您想在 CTable之后放置BTable （仍在同一张表中，只需移动tbody），请使用insertBefore：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;