本文详解如何在 JavaScript 动态创建表格行时，为每一列正确插入独立的 <input> 元素，并为其设置 name、type 等属性，避免因重复引用同一 DOM 节点导致的渲染异常。
本文详解如何在 javascript 动态创建表格行时，为每一列正确插入独立的 `` 元素，并为其设置 `name`、`type` 等属性，避免因重复引用同一 dom 节点导致的渲染异常。
在使用 JavaScript 动态构建 HTML 表格时，一个常见误区是：多次调用 appendChild() 同一个元素节点，会导致该元素被「移动」而非「复制」。这正是原代码中所有输入框只出现在最后一列的根本原因——inputbox 被反复移入不同 <td>，最终仅保留在最后一个单元格中。
✅ 正确做法：为每列创建独立的 input 实例
你需要为每个 <td> 创建新的 <input> 元素，并分别设置其 type、name、class 等属性，确保表单提交时能正确收集各字段数据。以下是优化后的完整实现：
let srno = 1;
function CreateTables() {
const table = document.querySelector('table');
const newRow = table.insertRow(-1); // 插入到 tbody 末尾
// 第一列：序号（纯文本）
const cell1 = newRow.insertCell(0);
cell1.textContent = ++srno; // 自增并显示
// 第二列：电器名称（text 类型）
const cell2 = newRow.insertCell(1);
const inputName = document.createElement('input');
inputName.type = 'text';
inputName.name = 'nameofapp[]'; // 使用数组名便于后端接收多组数据
inputName.className = 'textbox';
cell2.appendChild(inputName);
// 第三列：功率（number 类型）
const cell3 = newRow.insertCell(2);
const inputWatts = document.createElement('input');
inputWatts.type = 'number';
inputWatts.name = 'watts[]';
inputWatts.className = 'textbox';
cell3.appendChild(inputWatts);
// 第四列：数量
const cell4 = newRow.insertCell(3);
const inputNo = document.createElement('input');
inputNo.type = 'number';
inputNo.name = 'no[]';
inputNo.className = 'textbox';
cell4.appendChild(inputNo);
// 第五列：使用小时数
const cell5 = newRow.insertCell(4);
const inputHours = document.createElement('input');
inputHours.type = 'number';
inputHours.name = 'hours[]';
inputHours.className = 'textbox';
cell5.appendChild(inputHours);
}
// 绑定添加按钮事件
document.querySelector('.Addbutton').addEventListener('click', CreateTables);? 关键要点说明
- 不要复用同一元素：cloneNode() 可临时解决移动问题，但无法差异化设置 name 和 type；真正健壮的做法是为每列新建独立 input 元素。
- 命名建议使用数组语法（如 name="watts[]"）：这样后端（如 Python Flask、PHP、Node.js）可统一接收为数组，便于批量处理多行数据。
- 优先使用 textContent 而非 innerHTML：避免 XSS 风险，尤其当内容来自变量时。
- 确保 <table> 包含 <tbody>：现代浏览器虽会自动补全，但显式声明更规范，且 insertRow(-1) 默认操作 <tbody>。
? 进阶提示（可选增强）
- 添加删除行功能：为每行右侧增加「×」按钮，绑定 remove() 方法；
- 输入校验：为 number 类型添加 min="0" 或 step="1"；
- 初始化首行：若页面加载后需默认存在一行，可在 DOMContentLoaded 中调用一次 CreateTables() 并手动设 srno = 0。
通过以上方式，你不仅能准确将输入框注入每一列，还能确保表单语义清晰、可提交、易维护。
