本文详解如何使用 JavaScript 动态创建表格行，并为每列 <td> 独立插入带不同 name 属性的 <input> 元素，避免因重复引用同一 DOM 节点导致的覆盖问题。
本文详解如何使用 javascript 动态创建表格行，并为每列 `
在动态构建 HTML 表格时，一个常见误区是：复用同一个 input 元素节点多次调用 appendChild()。由于 DOM 节点是“移动”而非“复制”，每次 appendChild(inputbox) 实际上会将该 <input> 从上一个父容器中移除，再插入到新位置——最终它只存在于最后一个 <td> 中。
要为每一列都拥有独立、可提交的输入框，必须为每个 <td> 创建独立的 <input> 实例，并为其设置对应的 name、type 和其他属性（如 class）。以下是优化后的完整实现：
let srno = 1;
function CreateTables() {
const table = document.querySelector('table');
const newRow = table.insertRow(-1); // 插入到 tbody 末尾
// 第一列：序号（纯文本）
const cell1 = newRow.insertCell(0);
cell1.innerHTML = srno++;
// 后续四列：各类型输入框，需独立创建 + 设置 name
const inputConfigs = [
{ type: 'text', name: 'nameofapp', placeholder: 'Appliance name' },
{ type: 'number', name: 'watts', placeholder: 'Watts (W)' },
{ type: 'number', name: 'no', placeholder: 'Quantity' },
{ type: 'number', name: 'hours', placeholder: 'Hours/day' }
];
inputConfigs.forEach((config, index) => {
const cell = newRow.insertCell(index + 1);
const input = document.createElement('input');
input.type = config.type;
input.name = config.name;
input.className = 'textbox';
input.placeholder = config.placeholder;
cell.appendChild(input);
});
}
document.querySelector('.Addbutton').addEventListener('click', CreateTables);✅ 关键改进点说明：
- ✅ 每次循环都调用 document.createElement('input')，确保每个 <input> 是全新 DOM 节点；
- ✅ 显式设置 input.name（如 'nameofapp'、'watts'），保障表单提交时后端能按名准确接收数据；
- ✅ 区分 type 类型（text/number），提升用户体验与数据校验能力；
- ✅ 使用 placeholder 增强可读性（可选但推荐）；
- ✅ 移除对 cloneNode() 的依赖，逻辑更清晰、不易出错。
⚠️ 注意事项：
- 若需支持 IE，cloneNode() 不带参数时默认不复制子节点（安全），但现代开发建议始终使用 cloneNode(true) 显式声明深拷贝；
- 表单提交前，请确保所有 <input> 都位于 <form> 内且 name 值唯一（同名多值将被合并为数组，需后端配合解析）；
- 序号 srno 建议初始化为 1（首行为手动写死的 1），因此 CreateTables() 中应先赋值再自增（即 cell1.innerHTML = srno++），避免第二行显示为 2 而跳过 1。
通过以上方式，你不仅能正确生成多列独立输入框，还能确保每个字段具备语义化 name 属性，为后续表单验证、数据收集和后端处理打下坚实基础。
