如何提取HTML动态表格行数据经AJAX提交PHP处理订单商品存储

我正在使用PHP、MYSQL、HTML和JS开发订单管理系统（Order Management System），其中订单（Order）信息存储在独立数据库表中，订单商品（Order Products）存储在第二张数据库表中，该表包含order_id和product_id两个外键，支持单个订单关联多个商品。

核心问题 #

不清楚如何获取HTML表格中的所有行数据并整理为数组，再将该数组通过ajax发送到PHP端进行处理。

当前实现思路 #

• 用户从下拉列表选择商品、输入商品数量后，点击"ADD PRODUCT"按钮
• 在JavaScript中给按钮绑定click事件，事件触发后使用JS的insertRow()方法动态向表格中插入新行
• 在新增行的各单元格中插入表单字段存储对应值，目前商品已经可以成功以带值行的形式添加到表格中，但不确定该步骤的表单字段设计是否正确

注：不需要提供完整实现代码，仅需要正确实现该需求的方法指导，PHP端处理逻辑已掌握，无需额外说明。

现有HTML代码 #

<table id="document_items_table">
   <thead class="table-light">
       <tr>
         <th width="10%">#</th>
         <th>Šifra</th>
         <th>Naziv</th>
         <th>Količina</th>
         <th>JM</th>
        </tr>
   </thead>                      
   <tbody></tbody>
</table>

现有JavaScript代码 #

// add item to document
$("#btn_add_document_item").on('click', function(e) {

     var data = $('#select2-proizvodi').select2('data');

     // add table row
     var table = document.getElementById('document_items_table');
     var row = table.insertRow(-1);

     var id = row.insertCell(0);
     var code = row.insertCell(1);
     var name = row.insertCell(2);
     var qty = row.insertCell(3);
           

    row.setAttribute('id', 'row-'+table.rows.length);

    id.innerHTML = '<input type="text" value="'+data[0]['id']+'" id="id-'+data[0]['id']+'"  name="item[]["id"]"';
    code.innerHTML = '<input type="text" value="'+data[0]['code']+'" name="item[]["code"]"';
    name.innerHTML = '<input type="text" value="'+data[0]['text']+'"  name="item[]["name]"';
    qty.innerHTML = '<input type="text" class="form-input"  value="'+$("#kolicina_input").val()+'" name="kolicina[]["kolicina"]"';
           
});

第一步：修正动态插入行的字段设计 #

你当前动态生成的inputname属性存在语法错误，且字段分组逻辑混乱。两种字段设计方案选其一即可：

• 推荐方案：不用给input设置复杂的数组格式name，只需要给每个业务字段对应的input加固定class标识即可：比如商品ID输入框加class="col-item-id"，商品编码加class="col-item-code"，商品名称加class="col-item-name"，商品数量加class="col-item-qty"。后续取值时直接按class定位元素，写法简单不容易出错。
• 传统表单方案：如果要兼容原生表单提交的name规则，同一行的字段必须共用同一个数组索引，比如第一行字段name为item[0][id]、item[0][code]、item[0][qty]，第二行索引递增为item[1][*]，不要所有字段都用空索引[]，否则PHP接收到的数组字段是打散的，无法关联到同一行商品。

第二步：遍历表格行组装商品数组 #

在触发订单提交的逻辑节点（比如点击保存订单按钮时），按以下逻辑处理：

1. 定位表格tbody下的所有tr元素，自动排除表头行
2. 初始化空数组用于存储结构化的商品数据
3. 逐行遍历tr元素：
   • 在当前行范围内，通过之前约定的class选择器找到对应input，读取value值，可同步做基础校验（比如数量不能为空、不能为非数字）
   • 将当前行的商品ID、编码、名称、数量拼成键值对对象，push到提前初始化的商品数组中
4. 遍历完成后就能得到结构规整的商品数组，格式参考：[{id: 1, code: "A001", name: "商品1", qty: 2}, {id: 3, code: "B002", name: "商品2", qty: 1}]

第三步：AJAX提交数据到后端 #

提交时注意两个细节：

• 用jQuery的$.ajax发送POST请求时，将订单基础信息（如客户ID、订单备注等）和组装好的商品数组合并为同一个参数对象传递即可
• 如果直接传递JS数组，jQuery会自动做序列化，PHP端可以直接通过$_POST['item']拿到和前端结构一致的数组；如果要传JSON格式，需要指定contentType: "application/json"，PHP端通过php://input获取原始请求体解析即可
• 扩展建议：给每一行增加删除按钮，点击时直接移除对应的tr节点即可，后续组装数组时会自动跳过被删除的行，不需要额外维护商品列表的内存变量，逻辑更简单。

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