使用JavaScript Revisited将一个HTML表的内容复制到另一个HTML表中

Question

我自学JavaScript，我需要将一个表复制到另一个表中。我已经能够通过这个例子复制@ Gushiken的code和@ Quentin的response：

HTML：

<button onclick="copytable()">Copy Table</button>

<br />
<br />

<table id="TableA">
    <!--<tbody></tbody>-->
</table>
<br />

<table id="TableB" style="border:solid">
    <thead>
        <tr>
            <td id="col1">Column 1</td>
            <td id="col2">Column 2</td>
            <td id="col3">Column 3</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data a</td>
            <td>Data b</td>
            <td>Data c</td>
        </tr>
    </tbody>
</table>
<br />

JavaScript的：

function copytable() {
  var source = document.getElementById('TableB');
  var destination = document.getElementById('TableA');
  var copy = source.cloneNode(true);
  copy.setAttribute('id', 'tableB');
  destination.parentNode.replaceChild(copy, destination);
}

但是一旦复制了表B，我如何访问复制表中的元素？即，表B是＆＃34;硬编码的＆＃34; HTML而...是内存中的表A？我希望在表复制事件之后将第1列更改为第A列，第2列更改为第B列等。

另外，如何删除复制的表？

Answer 1

要删除旧的TableB，您可以尝试source.outerHTML = "";

然后删除对象：delete(source);

关于在tableA中插入TableB我不明白。 要插入<tableA><tableB></tableB></tableA>， 或者您只想移动TableB的<td>？

Answer 2

由于您已将新ID应用于副本，因此可以使用该ID来访问克隆元素。

＆＃13;

＆＃13;

function copytable() {
  var source = document.getElementById('TableB');
  var destination = document.getElementById('TableA');
  var copy = source.cloneNode(true);
  copy.setAttribute('id', 'tableA');
  destination.parentNode.replaceChild(copy, destination);
}

function deletCopy() {
  var el = document.getElementById('tableA');
  el.innerHTML = '';
}

＆＃13;

<button onclick="copytable()">Copy Table</button>
<button onclick="deletCopy()">Delete Table</button>

<br />
<br />

<table id="TableA">
  <!--<tbody></tbody>-->
</table>
<br />

<table id="TableB" style="border:solid">
  <thead>
    <tr>
      <td id="col1">Column 1</td>
      <td id="col2">Column 2</td>
      <td id="col3">Column 3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data a</td>
      <td>Data b</td>
      <td>Data c</td>
    </tr>
  </tbody>
</table>
<br />

＆＃13;

＆＃13;

＆＃13;

但是访问新表中的元素的问题是，因为你有克隆内部元素的id，所以你有多个具有相同id的元素。如果您可以使用class而不是td元素的id，那么

＆＃13;

＆＃13;

function copytable() {
  var source = document.getElementById('TableB');
  var destination = document.getElementById('TableA');
  var copy = source.cloneNode(true);
  copy.setAttribute('id', 'TableA');
  destination.parentNode.replaceChild(copy, destination);
}

function deletCopy() {
  var el = document.getElementById('TableA');
  el.innerHTML = '';
}

function changeCopy(){
  var el = document.getElementById('TableA');
  el.querySelector('.col1').innerHTML = 'Column A';
  el.querySelector('.col2').innerHTML = 'Column B';
  el.querySelector('.col3').innerHTML = 'Column C';
}

＆＃13;

<button onclick="copytable()">Copy Table</button>
<button onclick="deletCopy()">Delete Table</button>
<button onclick="changeCopy()">Update Table</button>

<br />
<br />

<table id="TableA">
  <!--<tbody></tbody>-->
</table>
<br />

<table id="TableB" style="border:solid">
  <thead>
    <tr>
      <td class="col1">Column 1</td>
      <td class="col2">Column 2</td>
      <td class="col3">Column 3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data a</td>
      <td>Data b</td>
      <td>Data c</td>
    </tr>
  </tbody>
</table>
<br />

＆＃13;

＆＃13;

＆＃13;

Answer 3

要删除源表，您可以执行以下操作：

var tableB = document.getElementById('TableB');
tableB.parentNode.removeChild(tableB);

您可以在复制后立即更改复制的表格，例如：

function copytable() {
  var source = document.getElementById('TableB');
  var destination = document.getElementById('TableA');
  var copy = source.cloneNode(true);
  copy.id = 'TableA';

  /* you can change what you want already here, e.g: */
  [].forEach.call(copy.querySelectorAll('td'), function(item, index) {
    switch (item.textContent.trim()) {
      case 'Column 1':
        item.textContent = 'Column A';
        break;
      case 'Column 2':
        item.textContent = 'Column B';
        break;
      case 'Column 3':
        item.textContent = 'Column C';
        break;
    }
  });

  destination.parentNode.replaceChild(copy, destination);
}

function deleteTableB() {
  var tableB = document.getElementById('TableB');
  tableB.parentNode.removeChild(tableB);
}

<button onclick="copytable()">Copy Table</button>
<button onclick="deleteTableB()">Delete TableB</button>

<br />
<br />

<table id="TableA">
  
</table>
<br />

<table id="TableB" style="border:solid">
  <thead>
    <tr>
      <td id="col1">Column 1</td>
      <td id="col2">Column 2</td>
      <td id="col3">Column 3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data a</td>
      <td>Data b</td>
      <td>Data c</td>
    </tr>
  </tbody>
</table>
<br />