如何用JavaScript正确复制表格中的输入框行？

问题说明 #

我是编程新手，希望实现复制表格中的输入框行功能，让用户可按需添加任意多行。目前已实现添加新行，但新行不是输入框、排版错乱，且应添加到表格底部。

点击前效果：

点击后错误效果：

原代码 #

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

修正方案 #

原代码的问题：

1. insertRow(0)会把新行插入到表格顶部，而非底部
2. 原表格每行仅1个<td>，但插入了2个单元格，导致排版错乱
3. 新单元格内添加的是纯文本，而非原行的输入框结构

修改后的JavaScript代码：

function addRow() {
  // 获取表格的tbody元素，确保新行插入位置正确
  const tbody = document.getElementById("goalsTable").querySelector("tbody");
  // 在tbody末尾插入新行（不传参数默认添加到最后）
  const newRow = tbody.insertRow();
  // 插入一个单元格，和原行结构保持一致
  const cell = newRow.insertCell(0);
  // 复制原行的输入框结构到新单元格
  cell.innerHTML = '<input type="text" placeholder="Name">: £<input type="number" placeholder="Amount">';
}

说明 #

• 直接操作<tbody>插入新行，保证表格结构规范
• insertRow()不传参数时默认在tbody末尾添加行，满足“添加到表格底部”的需求
• 复制原行的输入框HTML结构，确保新行和原有行样式、功能完全一致

内容的提问来源于stack exchange，提问作者Griffic