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>

当用户点击按钮tbody时，我希望复制table的{{1}}中的所有行。

这是我的代码

clone

我有var clnNode=document.getElementById("mytab1").tBodies[0].rows[0].cloneNode(true);所以我这样传递它

other table

那个表2有像这样的HTML

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

但是我在浏览器上得到了<table id="table2" border="1"> <thead> <th>No</th> <th>Name</th> </thead> <tbody> </tbody> </table>。

请仅使用JavaScript帮助我。

感谢。

Answer 1

您还需要将其附加到tbody。以下是code为一行执行此操作

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>

如何克隆表中的所有行

3 个答案: