将Datatable记录保存至数据库时遇TypeError错误的技术求助

首先，咱们先拆解你遇到的TypeError: 'insertCell' called on an object that does not implement interface HTMLTableRowElement错误原因：

你代码里的tabledets是通过it_det.rows().data()获取的，这已经是一个包含所有行数据的DataTables API实例，不是原始的DataTable对象。当你调用tabledets.rows(i).data()时，相当于在这个数据集合上再次尝试选择行DOM元素，这会导致DataTables内部错误地操作DOM，从而抛出这个insertCell相关的类型错误。

你找到的修复方案是正确的 #

把循环里的rows(i)改成row(i)（单数形式）就能解决问题：

for (i=0; i<tabledets.length; i++){ 
    arr1[i]=tabledets.row(i).data(); 
}

因为row(i)是针对当前API实例获取指定索引的行数据，而不是去操作DOM元素，所以能正确拿到每行的数据并存入数组。

更简洁的实现方式（不用手动循环） #

其实DataTables提供了更便捷的方法把行数据转成普通数组，完全不用自己写循环：

方法1：使用toArray()方法

DataTables的API实例自带toArray()方法，可以直接把所有行数据转成JavaScript普通数组：

var arr1 = it_det.rows().data().toArray();

方法2：用Array.from转换

因为rows().data()返回的API对象是可迭代的，也可以用原生JS的Array.from直接转换：

var arr1 = Array.from(it_det.rows().data());

传递到PHP的注意事项 #

当你通过AJAX把这个数组传给PHP时：

• jQuery会自动把数组序列化为arr1[]格式的参数，PHP端可以直接通过$_POST['arr1']获取到这个二维数组（如果每行是数组结构）。
• 如果你的行数据是对象类型（比如DataTables用了columns.data配置），jQuery会把对象序列化为键值对，PHP接收后会是关联数组，处理时注意对应字段名。

最后，提一下你AJAX代码里的小问题：success回调里你同时用了data和未定义的result变量，建议改成只使用data：

success : function(data) {
    $('#product_form')[0].reset();
    $('#productModal').modal('hide');
    $('#alert_action').fadeIn().html('<div class="alert alert-success">'+data+'</div>');
    $('#action').attr('disabled', false);
    $('#item_data').DataTable().ajax.reload();
}

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