DataTables表格含输入框时如何获取按行分组的结构化数组

前端（jQuery）方案 #

直接遍历DataTable的每一行，逐行采集表单值即可得到目标结构，修改你的按钮点击事件代码如下：

var t = $('#example').DataTable( {
    rowReorder: true
} );

$('button').click( function() {
    let formData = [];
    // 遍历所有表格行
    t.rows().every(function() {
        const $tr = $(this.node());
        formData.push({
            fname: $tr.find('input[name="fname"]').val(),
            lname: $tr.find('input[name="lname"]').val()
        });
    });
    // 此处formData就是你需要的按行分组结构，可直接提交给后端
    console.log(formData);
    return false;
} );

如果需要用常规表单序列化方式提交，可以直接修改HTML中input的name属性，带上行索引：

<!-- 第一行 -->
<input type="text" name="row[0][fname]" value="Max" />
<input type="text" name="row[0][lname]" value="Mustermann" />
<!-- 第二行 -->
<input type="text" name="row[1][fname]" value="Max" />
<input type="text" name="row[1][lname]" value="Mustermann" />

修改后直接用原有的serialize方法提交，后端接收到的row字段就是目标结构。

PHP后端方案 #

如果你不想修改前端代码，已经拿到了fname和lname各自为数组的提交结果，可以在PHP侧做二次组装：

<?php
$targetArr = [];
// 遍历fname数组，按索引匹配对应lname值
foreach ($_POST['fname'] as $idx => $fname) {
    $targetArr[] = [
        'fname' => $fname,
        'lname' => $_POST['lname'][$idx]
    ];
}
// $targetArr即为你需要的按行分组结构
print_r($targetArr);
?>

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