如何使用JavaScript/jQuery获取多行列input和select值并组装为数组

核心逻辑为提前提取表头字段，遍历表格所有行逐行匹配单元格控件值组装成目标数组，天然兼容动态新增的同结构行，无需修改逻辑即可自动识别新增行数据。

原生JavaScript实现 #

// 提前提取表头字段
const headers = Array.from(document.querySelectorAll('thead th')).map(th => th.textContent.trim());

// 监听提交按钮点击
document.getElementById('onSubmit').addEventListener('click', function(e) {
  // 阻止表单默认提交跳转行为
  e.preventDefault();
  const data = [];

  // 遍历tbody下所有行，含动态新增行
  document.querySelectorAll('tbody tr').forEach(row => {
    const rowItem = {};
    const cells = row.querySelectorAll('td');
    
    cells.forEach((cell, index) => {
      // 匹配单元格内的控件，第一列为select，其余为number输入框
      const control = cell.querySelector('select, input[type="number"]');
      rowItem[headers[index]] = control.value;
      // 若需要取select的展示文本而非value值，替换上一行为：
      // rowItem[headers[index]] = control.tagName === 'SELECT' ? control.options[control.selectedIndex].text : control.value;
    });

    data.push(rowItem);
  });

  // 输出最终结构，可自行调整后续处理逻辑
  console.log(data);
});

jQuery实现 #

// 监听提交按钮点击
$('#onSubmit').on('click', function(e) {
  e.preventDefault();
  // 提取表头字段
  const headers = $('thead th').map((_, th) => $(th).text().trim()).get();

  // 遍历所有行组装数据
  const data = $('tbody tr').map((_, row) => {
    const rowItem = {};
    $(row).find('td').each((index, cell) => {
      const control = $(cell).find('select, input[type="number"]');
      rowItem[headers[index]] = control.val();
      // 若需要取select的展示文本而非value值，替换上一行为：
      // rowItem[headers[index]] = control.is('select') ? control.find('option:selected').text() : control.val();
    });
    return rowItem;
  }).get();

  // 输出最终结构
  console.log(data);
});

注意事项 #

• 原HTML中第二列输入框设置了固定id check，动态新增行时建议删除该固定id，避免页面id重复冲突
• 若需要对输入值做类型转换（比如把number输入框的字符串值转为数字），可以在赋值时加一层Number(control.value)处理

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