动态添加带 name 属性的输入框到表格行中（JavaScript 教程）-js教程-PHP中文网

动态添加带 name 属性的输入框到表格行中（JavaScript 教程）

本文详解如何在 JavaScript 动态创建表格行时，为每一列正确插入独立的元素，并为其设置 name、type 等属性，避免因重复引用同一 DOM 节点导致的渲染异常。

本文详解如何在 javascript 动态创建表格行时，为每一列正确插入独立的 `` 元素，并为其设置 `name`、`type` 等属性，避免因重复引用同一 dom 节点导致的渲染异常。

在使用 JavaScript 动态构建 HTML 表格时，一个常见误区是：多次调用 appendChild() 同一个元素节点，会导致该元素被「移动」而非「复制」。这正是原代码中所有输入框只出现在最后一列的根本原因——inputbox 被反复移入不同

，最终仅保留在最后一个单元格中。

✅ 正确做法：为每列创建独立的 input 实例

你需要为每个

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

创建新的元素，并分别设置其 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 风险，尤其当内容来自变量时。
确保包含：现代浏览器虽会自动补全，但显式声明更规范，且 insertRow(-1) 默认操作。
? 进阶提示（可选增强）

添加删除行功能：为每行右侧增加「×」按钮，绑定 remove() 方法；

输入校验：为 number 类型添加 min="0" 或 step="1"；

初始化首行：若页面加载后需默认存在一行，可在 DOMContentLoaded 中调用一次 CreateTables() 并手动设 srno = 0。

通过以上方式，你不仅能准确将输入框注入每一列，还能确保表单语义清晰、可提交、易维护。