如何处理类表格布局Div表单的serializeArray数据，实现行记录拆分？

我明白你的困扰——serializeArray()把所有表单控件的name-value对都扁平化输出了，完全没法对应到原来的行记录里。这里有两个靠谱的解决方案，你可以根据是否能修改现有结构来选择：

方案一：修改控件name属性，用结构化命名（推荐） #

这是最规范的做法，后端处理也更省心。给每行里的控件name加上分组标识，比如用数组索引的格式：

<div id="mainnotetocodediv"> 
  <div id="1"> 
    <input type="hidden" name="records[0][installnoteid]" value="1"> 
    <label class="blockinline width-800"></label> 
    <input type="text" name="records[0][ksinotecode]" class="width-75" value="r"> 
  </div> 
  <div id="2"> 
    <input type="hidden" name="records[1][installnoteid]" value="2"> 
    <label></label> 
    <input type="text" name="records[1][ksinotecode]" class="width-75" value="r"> 
  </div>
  <!-- 其他行同理，索引递增即可 -->
</div>

这样用$('#mainnotetocodediv').serialize()会生成结构化的参数串，后端语言（比如PHP、Java）能直接解析成数组对象。如果前端需要JavaScript对象，也可以手动处理serializeArray()的结果，或者用jQuery.param的反向解析逻辑把参数串转成数组。

方案二：前端手动遍历行，收集对应数据（无需改HTML） #

如果没法修改现有HTML结构，那就直接遍历每个行容器，把每行里的控件数据单独收集：

// 获取所有行容器
const rowContainers = $('#mainnotetocodediv > div');
const formattedData = [];

rowContainers.each(function() {
  const rowData = {};
  // 遍历当前行内的所有input控件
  $(this).find('input').each(function() {
    const fieldName = $(this).attr('name');
    rowData[fieldName] = $(this).val();
  });
  formattedData.push(rowData);
});

// 输出结果就是按行分组的数组：
// [{installnoteid: "1", ksinotecode: "r"}, {installnoteid: "2", ksinotecode: "r"}, ...]
console.log(formattedData);

为什么原来的方法不行？ #

serializeArray()的逻辑就是遍历所有表单控件，按顺序把name和value存成独立对象，完全不关心控件所在的父容器。所以同一行的installnoteid和ksinotecode会被拆成无关联的条目，自然没法对应到同一行记录。

总结一下：能改HTML的话优先用方案一，符合表单提交的最佳实践；不能改的话方案二完全能解决你的问题，逻辑清晰也容易维护。

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