Copy ALL rows from one HTML table and append to other table

Question

I've been searching SO quite a bit for a solution like this, but I keep finding how to transfer only ONE row from one table to another, rather than appending ALL rows to table 2 from table 1 (and then clearing the rows from table 1, which is easy). Here's what I've tried so far:

 function TransferRowsRight() { var t1 = document.getElementById("t1"); const length = t1.rows.length; for (var index = 0; index < length; index++) { var rowHTML = $('#table1 tbody tr:first').html(); $('#table2 tr:last').after("<tr>" + rowHTML + "</tr>"); t1.deleteRow(0); } } function TransferRowsLeft() { var t2 = document.getElementById("t2"); const length = t2.rows.length; for (var index = 0; index < length; index++) { var rowHTML = $('#table2 tbody tr:first').html(); $('#table1 tr:last').after("<tr>" + rowHTML + "</tr>"); t2.deleteRow(0); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="display: flex; flex-direction: row"> <table id="table1" border="1"> <thead> <tr> <th>Food</th> <th>Cost</th> <th>Quantity</th> </tr> <tbody id="t1"> <tr> <td>Apple</td> <td>$0.50</td> <td>18</td> </tr> <tr> <td>Bread</td> <td>$1.99</td> <td>7</td> </tr> <tr> <td>Salmon</td> <td>$7.99</td> <td>5</td> </tr> </tbody> </table> <table id="table2" border="1" style="margin-left: 2%"> <thead> <tr> <th>Food</th> <th>Cost</th> <th>Quantity</th> </tr> </thead> <tbody id="t2"> <tr> <td>Broccoli</td> <td>$3.75</td> <td>11</td> </tr> <tr> <td>Oranges</td> <td>$6.50</td> <td>8</td> </tr> <tr> <td>Chicken</td> <td>$6.25</td> <td>12</td> </tr> </tbody> </table> <div style="align-self: center"> <button onclick="TransferRowsLeft()" style="margin-left: 2%">Transfer Rows Left</button> <button onclick="TransferRowsRight()" style="margin-left: 2%">Transfer Rows Right</button> </div> </div>

As you can see, my code works only for the first two transfers of rows - one left and one right - and then it doesn't work when tried for a third time. Also - and this is important - I know there has to be a much simpler and more orthodox way of doing this, like with built-in JavaScript methods, rather than what I'm doing; I just can't seem to find anything on this.

Answer 1

It looks like you were appending to the th of the other table, which means eventually the tbody won't have any rows, which is why it doesn't work after the 2nd time.

To clean up a little bit you can just have 1 function that does it for any tbody's ID. One for a source and one for a destination tbody.

Using JQuerys .each , .append , and .empty will get the job done.

 function TransferRows(src, dest) { $(`#${src} tr`).each((index, row) => { $(`#${dest}`).append(row); }); $(`#${src}`).empty(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="display: flex; flex-direction: row"> <table id="table1" border="1"> <thead> <tr> <th>Food</th> <th>Cost</th> <th>Quantity</th> </tr> <tbody id="t1"> <tr> <td>Apple</td> <td>$0.50</td> <td>18</td> </tr> <tr> <td>Bread</td> <td>$1.99</td> <td>7</td> </tr> <tr> <td>Salmon</td> <td>$7.99</td> <td>5</td> </tr> </tbody> </table> <table id="table2" border="1" style="margin-left: 2%"> <thead> <tr> <th>Food</th> <th>Cost</th> <th>Quantity</th> </tr> </thead> <tbody id="t2"> <tr> <td>Broccoli</td> <td>$3.75</td> <td>11</td> </tr> <tr> <td>Oranges</td> <td>$6.50</td> <td>8</td> </tr> <tr> <td>Chicken</td> <td>$6.25</td> <td>12</td> </tr> </tbody> </table> <div style="align-self: center"> <button onclick="TransferRows('t2', 't1')" style="margin-left: 2%">Transfer Rows Left</button> <button onclick="TransferRows('t1','t2')" style="margin-left: 2%">Transfer Rows Right</button> </div> </div>

Answer 2

This code works fine.

 function TransferRowsRight() { $('#t2').append($('#t1').html()); $('#t1').html(''); } function TransferRowsLeft() { $('#t1').append($('#t2').html()); $('#t2').html(''); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="display: flex; flex-direction: row"> <table id="table1" border="1"> <thead> <tr> <th>Food</th> <th>Cost</th> <th>Quantity</th> </tr> <tbody id="t1"> <tr> <td>Apple</td> <td>$0.50</td> <td>18</td> </tr> <tr> <td>Bread</td> <td>$1.99</td> <td>7</td> </tr> <tr> <td>Salmon</td> <td>$7.99</td> <td>5</td> </tr> </tbody> </table> <table id="table2" border="1" style="margin-left: 2%"> <thead> <tr> <th>Food</th> <th>Cost</th> <th>Quantity</th> </tr> </thead> <tbody id="t2"> <tr> <td>Broccoli</td> <td>$3.75</td> <td>11</td> </tr> <tr> <td>Oranges</td> <td>$6.50</td> <td>8</td> </tr> <tr> <td>Chicken</td> <td>$6.25</td> <td>12</td> </tr> </tbody> </table> <div style="align-self: center"> <button onclick="TransferRowsLeft()" style="margin-left: 2%">Transfer Rows Left</button> <button onclick="TransferRowsRight()" style="margin-left: 2%">Transfer Rows Right</button> </div> </div>

Answer 3

No need to iterate over all the rows. Just append the entire contents of your table bodies:

const t1 = document.getElementById("t1");
const t2 = document.getElementById("t2");
// swap t1 and t2 for other direction
t1.innerHTML += t2.innerHTML;
t2.innerHTML = '';

Edit: this will work the simple structure you've presented. In the case one of the tables you were using had multiple tbodies, you'd have to iterate over them.

Answer 4

The previous answers are better than this one, but I did find an unorthodox yet successful workaround to my problem that reflects the code in my question. I added an invisible row after deleting all rows in the tbody so I can trick the DOM into thinking the tbody isn't empty:

 function TransferRowsRight() { var t1 = document.getElementById("t1"); const length = t1.rows.length; for (var index = 0; index < length; index++) { var rowHTML = $('#table1 tbody tr:first').html(); $('#table2 tr:last').after("<tr>" + rowHTML + "</tr>"); t1.deleteRow(0); } $(".invisible").remove(); var invisibleRow = document.createElement('tr'); invisibleRow.style = "display: none"; invisibleRow.className = "invisible"; $('#table1 > tbody:last-child').append(invisibleRow); } function TransferRowsLeft() { var t2 = document.getElementById("t2"); const length = t2.rows.length; for (var index = 0; index < length; index++) { var rowHTML = $('#table2 tbody tr:first').html(); $('#table1 tr:last').after("<tr>" + rowHTML + "</tr>"); t2.deleteRow(0); } $(".invisible").remove(); var invisibleRow = document.createElement('tr'); invisibleRow.style = "display: none"; invisibleRow.className = "invisible"; $('#table2 > tbody:last-child').append(invisibleRow); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="display: flex; flex-direction: row"> <table id="table1" border="1"> <thead> <tr> <th>Food</th> <th>Cost</th> <th>Quantity</th> </tr> <tbody id="t1"> <tr> <td>Apple</td> <td>$0.50</td> <td>18</td> </tr> <tr> <td>Bread</td> <td>$1.99</td> <td>7</td> </tr> <tr> <td>Salmon</td> <td>$7.99</td> <td>5</td> </tr> </tbody> </table> <table id="table2" border="1" style="margin-left: 2%"> <thead> <tr> <th>Food</th> <th>Cost</th> <th>Quantity</th> </tr> </thead> <tbody id="t2"> <tr> <td>Broccoli</td> <td>$3.75</td> <td>11</td> </tr> <tr> <td>Oranges</td> <td>$6.50</td> <td>8</td> </tr> <tr> <td>Chicken</td> <td>$6.25</td> <td>12</td> </tr> </tbody> </table> <div style="align-self: center"> <button onclick="TransferRowsLeft()" style="margin-left: 2%">Transfer Rows Left</button> <button onclick="TransferRowsRight()" style="margin-left: 2%">Transfer Rows Right</button> </div> </div>

Hope this helps anyone in the future.