如何克隆表中的所有行

Question

抱歉，這很簡單。 我有

<table name="mytab" id="mytab1">
 <tbody>
 <tr> 
   <td>col1 Val1</td>
   <td>col2 Val2</td>
 </tr>
 <tr>
   <td>col1 Val3</td>
   <td>col2 Val4</td>
 </tr>
 </tbody>

我想在用戶單擊按鈕clone時復制table tbody的所有行。

這是我的代碼

var clnNode=document.getElementById("mytab1").tBodies[0].rows[0].cloneNode(true);

我還有other table所以我像這樣通過

var tableRef = document.getElementById('table2');
var newRow = tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML= clnNode;

那表2有這樣的html

            <table id="table2"  border="1">
                <thead>
                   <th>No</th>
                   <th>Name</th>
             </thead>
             <tbody>
             </tbody>
         </table>

但我在瀏覽器上得到了[object HTMLTableRowElement] 。

請僅以JavaScript幫助我。

謝謝。

Answer 1

您還需要將其附加到tbody 。 這是執行一行代碼的代碼

var table1 = document.getElementById("mytab1");
var tbody = table1.getElementsByTagName( "tbody" )[ 0 ];
var row1 = tbody.getElementsByTagName( "tr" )[ 0 ];
var clnNode=row1.cloneNode(true);
tbody.appendChild( clnNode );

您可以通過執行以下操作在另一個表中添加此克隆節點

var table2 = document.getElementById("table2");
var tbody = table1.getElementsByTagName( "tbody" )[ 0 ];
tbody.appendChild( clnNode ); //from previous code

Answer 2

用法cloneTR(table)

• table：以單個表為目標的任何選擇器或選擇器組合（例如'#id'，“。class”，“ tag”）。

 function cloneTR(table) { var tbl = document.querySelector(table); var tbd = tbl.querySelector('tbody'); var trList = tbd.querySelectorAll('tr'); var trArray = Array.prototype.slice.call(trList); for (var i = 0; i < trArray.length; i++) { var clTR = trArray[i].cloneNode(true); tbd.appendChild(clTR); } return false; } var btn = document.getElementById('btn'); btn.addEventListener('click', function(event) { cloneTR('#table1'); }, false); 

 #table1 { border: 2px dashed blue; } td { border: 1px solid red; } 

 <button id="btn">Clone</button> <table name="tab" id="table1"> <tbody> <tr> <td>col1 Val1</td> <td>col2 Val2</td> </tr> <tr> <td>col1 Val3</td> <td>col2 Val4</td> </tr> </tbody> 

Answer 3

使用.appendChind(node)方法代替.innerHTML= 。 請參考以下代碼示例以了解這種情況。

 var clnNode=document.getElementById("mytab1").tBodies[0].rows[0].cloneNode(true); document.getElementById("mytab1").appendChild(clnNode); document.getElementById("testNode").innerHTML = clnNode; 

 <table name="mytab" id="mytab1"> <tbody> <tr> <td>col1 Val1</td> <td>col2 Val2</td> </tr> <tr> <td>col1 Val3</td> <td>col2 Val4</td> </tr> </tbody> </table> <div id="testNode"></div>