使用jQuery获取HTML表格行输入值并按name生成多维数组

前置修正 #

首先给你的HTML表格标签添加id，匹配jQuery选择器：

<table id="table">
  <!-- 其余原有表格内容保持不变 -->
</table>

修正后的JS代码 #

function getAllValues() {
  // 存储所有行数据的外层数组
  const allValues = [];

  // 第一层遍历：逐行处理表格行
  $("#table tbody tr").each(function () {
    const rowData = {};
    // 第二层遍历：处理当前行内所有输入控件（包含input和textarea）
    $(this).find("input, textarea").each(function () {
      // 取输入控件的name属性作为键，输入值作为值
      const fieldName = $(this).attr("name");
      rowData[fieldName] = $(this).val();
    });
    // 将当前行数据存入外层数组
    allValues.push(rowData);
  });

  console.log(allValues);
  return allValues;
}

输出结构说明 #

单行数据时输出示例：

[
  {
    "bezeichnung": "Bezeichnung",
    "beschreibung": "Beschreibung",
    "menge": "0,00",
    "einheit": "Stk.",
    "preis": "0,00 €",
    "gesamt": "0,00 €"
  }
]

多行数据时会在数组中追加对应行的对象，完全满足按行分组、name属性为键的需求。

原代码问题梳理 #

• 未分层遍历：直接全局查找所有输入控件，无法实现按行分组
• 遗漏textarea元素：原代码仅查找input，会漏掉textarea的beschreibung字段
• 键名逻辑错误：使用遍历索引作为键，未读取输入控件的name属性
• 变量不匹配：声明了allValues变量但实际使用未定义的params变量
• 选择器不匹配：原HTML的table没有设置id="table"，jQuery选择器无法命中目标元素

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