Скопируйте содержимое одной таблицы HTML в другую с помощью JavaScript Revisited

Question

Я преподаю сам JavaScript, и мне нужно скопировать одну таблицу в другую. Я был в состоянии воспроизвести @ Gushiken-х code и @ Квентин 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 представляет собой «жесткий код» HTML, тогда как ... является таблицей A в памяти? Я хотел бы изменить столбец 1 на столбец A, столбец 2 на столбец B и т. Д. После события копирования таблицы.

Также, как удалить скопированную таблицу?

Answer 1

Чтобы удалить старый TableB вы можете попробовать source.outerHTML = "";

Затем удалить объект: delete(source);

О вставить TableB внутри TABLEA я не понял. Вы хотите вставить как <tableA><tableB></tableB></tableA>, или хотите переместить только <td> с панели TableB?

Answer 2

Поскольку вы применили новый идентификатор к копии, вы можете использовать его для доступа к клонированному элементу.

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 = ''; 
 
}

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

Но проблема доступа к элементам в новой таблице, поскольку у вас есть идентификаторы для внутренних элементов клона, у вас есть несколько элементов с одинаковыми идентификаторами. Если вы можете использовать класс вместо идентификатора для td элементов, то

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'; 
 
}

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

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