如何在JavaScript中遍历表格行与单元格获取输入框和下拉框值？

修改后的JavaScript代码 #

$(document).on("click", "#devSaveBtn", function () {
  var answer = window.confirm("Save changes");
  if (answer) {
    // 存储所有行数据的数组，用于后续批量处理
    var tableData = [];
    // 只获取表格中可见的数据行，跳过隐藏的模板行
    var rows = document.querySelectorAll("#steptable tbody tr:visible");
    
    rows.forEach(function(row) {
      var rowData = {};
      // 定位当前行内所有需要收集值的表单控件
      var controls = row.querySelectorAll(".vcheck");
      
      controls.forEach(function(control) {
        // 根据控件类型获取当前值
        if (control.tagName === "SELECT") {
          rowData[control.id] = control.value;
        } else if (control.tagName === "INPUT") {
          rowData[control.id] = control.value;
        }
      });
      
      // 可选：获取行号（从Record列读取）
      var recordNum = row.querySelector("#recordCount")?.textContent;
      if (recordNum) {
        rowData.recordNum = recordNum;
      }
      
      tableData.push(rowData);
    });
    
    // 输出所有行数据，方便调试
    console.log("表格数据：", tableData);
    
    // 此处可添加批量插入数据库的逻辑，比如将tableData提交给后端接口
    // 示例：$.post("/api/submit-data", { data: tableData }, function(response) { ... });
  } else {
    console.log("操作已取消");
  }
});

关键改进点 #

• 放弃读取innerHTML：直接读取表单控件（input/select）的value属性，这才是用户输入或选择的真实值
• 动态适配行/列：通过.vcheck类选择器定位需要收集的控件，不依赖硬编码的列索引，表格结构变化时无需修改代码
• 按行组织数据：将每行数据整理为键值对对象，键对应控件的ID（如OBJ_TYPE、OBJ_NAME），最终形成数组结构，完美适配批量SQL插入场景
• 过滤无效行：用:visible选择器跳过隐藏的模板行，只处理用户添加的有效数据行

数据结构示例 #

最终生成的tableData数组结构如下，可直接用于后端批量处理：

[
  {
    recordNum: "1",
    OBJ_TYPE: "Workflow",
    OBJ_NAME: "Project2",
    DEPLOYER_BUSINESS: "Asia",
    DEPLOYER_PROJECT: "5",
    DEPLOYER_CANDIDATE: "PRODJ (wm53a/b/c 10000)",
    DESCRIPTION: "测试描述"
  },
  // 更多数据行...
]

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