循环HTML表格行单元格取值时返回undefined的技术问题

原代码问题分析 #

• 错误获取表单值：使用innerHTML获取单元格内容，得到的是HTML字符串而非表单元素的实际输入值，正确方式应直接获取表单元素的value属性。
• 数组访问错误：将单元格内容存入数组后尝试访问.value属性，数组本身无此属性，导致输出undefined。
• 冗余列循环：遍历所有列的操作完全多余，只需针对每行内的表单元素进行取值即可。
• 重复ID问题：克隆行时未修改表单元素的ID，导致页面存在多个相同ID的元素，会干扰DOM元素选择。

修改后的实现代码 #

HTML注意事项 #

克隆行时，务必为每个表单元素添加唯一标识（比如行号后缀），示例：

<!-- 克隆后的行示例 -->
<tr role="row" class="" data-true-step="1">
  <td class="noncomponentswidth">
    <button class="readyonlyhidden" id="removeRecordBtn1" title="Remove Record" value="1">
      <span><i style="font-size:18px;" class="fa fa-minus-circle"></i></span>
    </button>
  </td>
  <td class="noncomponentswidth" id="recordCount">2</td>
  <td class="componentellipsis" id="recordTypeWrapper">
    <select id="OBJ_TYPE_1" class="vcheck">
      <option value="TP">TP</option>
      <option value="Workflow">Workflow</option>
      <option value="Package">Package</option>
    </select>
  </td>
  <!-- 其他表单元素同理，ID添加_1、_2等后缀 -->
</tr>

JavaScript实现 #

$(document).on("click", "#devSaveBtn", function() {
  var answer = window.confirm("Save changes");
  if (answer) {
    // 获取表格的所有数据行
    const rows = document.querySelectorAll("#TableRows tr");
    const records = [];

    rows.forEach(row => {
      // 跳过隐藏的模板行
      if (row.parentElement.style.display === "none") return;

      // 从当前行获取所有.vcheck表单元素
      const inputs = row.querySelectorAll(".vcheck");
      const record = {};

      // 遍历表单元素，整理为键值对
      inputs.forEach(input => {
        // 移除ID后的行号后缀，统一字段名
        const fieldName = input.id.replace(/_\d+$/, "");
        record[fieldName] = input.value.trim();
      });

      records.push(record);
      // 此处可直接执行单条数据插入数据库操作
      // insertIntoDatabase(record);
    });

    // 若后端支持批量插入，可执行批量操作
    // batchInsertIntoDatabase(records);

    console.log("所有记录数据：", records);
  } else {
    console.log("Service Cancel");
  }
});

关键改进点 #

• 精准取值：直接从表单元素获取value，确保拿到用户实际输入/选择的内容。
• 逐行收集：遍历每一行，将该行的所有表单值整理为对象，方便后续数据库操作。
• 避免重复ID干扰：通过处理ID后缀或模糊匹配选择器，解决克隆行ID重复的问题。
• 灵活插入：既支持逐行插入，也支持批量插入，适配不同的数据库操作需求。

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