从一个 HTML 表中复制所有行并附加到另一个表

Question

我一直在寻找这样的解决方案，但我一直在寻找如何仅将一行从一个表转移到另一个表，而不是将所有行从表 1 附加到表 2（然后从表中清除行1，这很容易）。 这是我迄今为止尝试过的：

 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>

如您所见，我的代码仅适用于行的前两次传输 - 一次向左和一次向右 - 然后在第三次尝试时不起作用。 此外——这很重要——我知道必须有一种更简单、更正统的方法来做到这一点，比如使用内置的 JavaScript 方法，而不是我正在做的； 我似乎无法找到任何关于此的信息。

Answer 1

看起来您正在附加到另一个表的 th ，这意味着最终 tbody 不会有任何行，这就是为什么它在第二次之后不起作用。

要稍微清理一下，您可以只使用 1 个函数来为任何 tbody 的 ID 执行此操作。 一个用于源，一个用于目标 tbody。

使用 JQuery .each 、 .append和.empty将完成工作。

 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

这段代码工作正常。

 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

无需遍历所有行。 只需附加表体的全部内容：

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

编辑：这将适用于您提供的简单结构。 如果您使用的表之一有多个 tbodies，则必须遍历它们。

Answer 4

以前的答案比这个好，但我确实找到了一种非正统但成功的解决方法来解决我的问题，它反映了我的问题中的代码。 我在删除tbody所有行后添加了一个不可见的行，这样我就可以欺骗 DOM 认为tbody不为空：

 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>

希望这对未来的任何人都有帮助。