动态添加带 name 属性的多个输入框到表格行中-html教程-PHP中文网

动态添加带 name 属性的多个输入框到表格行中

本文详解如何使用 JavaScript 动态创建表格行，并为每列独立插入带不同 name 属性的元素，避免因重复引用同一 DOM 节点导致的覆盖问题。

本文详解如何使用 javascript 动态创建表格行，并为每列 `

` 独立插入带不同 `name` 属性的 `` 元素，避免因重复引用同一 dom 节点导致的覆盖问题。

在动态构建 HTML 表格时，一个常见误区是：复用同一个 input 元素节点多次调用 appendChild()。由于 DOM 节点是“移动”而非“复制”，每次 appendChild(inputbox) 实际上会将该从上一个父容器中移除，再插入到新位置——最终它只存在于最后一个

中。

要为每一列都拥有独立、可提交的输入框，必须为每个

创建独立的实例，并为其设置对应的 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')，确保每个是全新 DOM 节点；
✅ 显式设置 input.name（如 'nameofapp'、'watts'），保障表单提交时后端能按名准确接收数据；
✅ 区分 type 类型（text/number），提升用户体验与数据校验能力；
✅ 使用 placeholder 增强可读性（可选但推荐）；
✅ 移除对 cloneNode() 的依赖，逻辑更清晰、不易出错。

⚠️ 注意事项：

若需支持 IE，cloneNode() 不带参数时默认不复制子节点（安全），但现代开发建议始终使用 cloneNode(true) 显式声明深拷贝；
表单提交前，请确保所有都位于
内且 name 值唯一（同名多值将被合并为数组，需后端配合解析）；
序号 srno 建议初始化为 1（首行为手动写死的 1），因此 CreateTables() 中应先赋值再自增（即 cell1.innerHTML = srno++），避免第二行显示为 2 而跳过 1。

通过以上方式，你不仅能正确生成多列独立输入框，还能确保每个字段具备语义化 name 属性，为后续表单验证、数据收集和后端处理打下坚实基础。