如何在 JavaScript 中复制一行表格输入？答案

【问题标题】：How to duplicate a row of table inputs in JavaScript?如何在 JavaScript 中复制一行表格输入？
【发布时间】：2022-07-27 20:14:38
【问题描述】：

这里是编码新手，基本上我希望能够复制一行输入，以便用户可以添加任意数量的输入。我设法让它添加一个新行，但它们不是输入框，它们只是漂浮在不合适的位置。他们也应该走到表格的底部。

点击前：

点击后：

HTML
<div class="Goals" onload="createTable()">
<h2>Goals</h2>
<table id="goalsTable">
  <tbody>
  <tr>
    <td><input type="text" placeholder="Name">: £<input type="number" placeholder="Amount"></td>
  </tr>
  </tbody>
</table><br>
<input type="button" onclick="addRow()" value="Add row">

JavaScript
function addRow() {
var x = document.getElementById("goalsTable").insertRow(0);
var y = x.insertCell(0);
var z = x.insertCell(1);
y.innerHTML = "Name";
z.innerHTML = "Amount";
}

【问题讨论】：

使用 Javascript 并在另一个 div 中创建两个元素，并在单击按钮时将其放置在行下方。
只需克隆现有的第一行：const rows = document.getElementById('goalsTable').rows; rows[rows.length - 1].after(rows[0].clone(true))。如果您想要一个在表中不可见且仅用于创建新行的“模板行”，只需将其包装在 <template> 中并引用该行而不是第一个表行来克隆它。

标签： javascript html

【解决方案1】：

你为什么不直接使用innerHTML：

function addRow(){

let tableBody = document.querySelector('#goalsTable tbody')
tableBody.innerHTML +=`<td><input type="text" placeholder="Name">: £<input type="number" placeholder="Amount"></td>`;
}

【讨论】：

【解决方案2】：

点击按钮，在函数 addRow() 中，请尝试下面的示例代码。确保你使用过 AJAX 库

 var rowCount = $('#goalsTable tr').length;
        var $lastRow = $("[id$=goalsTable] tr:last-child");
        var $newRow = $lastRow.clone(); //clone it

【讨论】：