Javascript .appendChild（tableA）テーブルを単一のセルに移動します。

Question

私はJavascriptで2つのテーブルを持っています。

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

私は、このコマンドを使用して、BTABLEにCTableの体のコピーしたいです。私はこれをしようとすると

this.BTable.appendChild(this.CTable); 

は、しかし、私は次のような出力が得られます。

の代わり

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

（これは私が探しているものです）：基本的には、appendChildコマンドをロード

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

テーブル全体を最初のセルに挿入します。気になるテーブルを一緒に追加するJavascriptオブジェクト/関数はありますか、手動で行を読み込んで行を挿入する必要がありますか？おかげ

（注：これにはいくつかの類似した質問は、私が取得するために管理がどれも動作していないとJSで見つかった唯一のソリューションすることが以前に頼まあります）

Answer 1

あなたはCTableからBTABLEにすべての行を挿入しようとすることができます。

var rows = this.CTable.querySelectorAll("tr"); 
for (var i = 0; i<rows.length; i++) { 
    this.BTable.appendChild(rows[i]); 
} 

Answer 2

あなたはtbody要素tbody別内部の要素を入れて、ブラウザを求めています。それはできませんので、それは次善のことです（おそらくブラウザーによって異なります）。

あなたは（まだ同じテーブルで、ちょうどtbodyを動かす）​​後CTableを入れたい場合は、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>