Datatable通过Ajax添加行时触发Cannot set property 'id' of null TypeError错误的求助

这个Cannot set property 'id' of null错误的核心是你调用row.add(...).node()时返回了null——也就是说你无法获取到刚添加行的DOM节点，导致给它赋值id时出错。下面是具体的排查点和解决办法：

1. 先修正最容易忽略的拼写错误 #

你的HTML表格id是table_modal_item_Fg（注意最后是大写的Fg），但JS中使用的Datatable实例变量是table_modal_itemfg（小写fg）。如果你的Datatable初始化代码是类似下面这样的：

var table_modal_itemfg = $('#table_modal_itemfg').DataTable();

那这里的选择器#table_modal_itemfg根本找不到你的表格，导致table_modal_itemfg是一个无效实例，后续调用row.add自然会出问题，node()返回null。

解决办法：
统一表格id和JS中的选择器：要么把HTML里的表格id改成table_modal_itemfg，要么初始化时用正确的选择器$('#table_modal_item_Fg')。

2. row.add()后直接获取节点的时机不对 #

Datatable的row.add()方法只是把行数据添加到内存数据集中，并没有立刻渲染到DOM里，这时候调用.node()自然拿不到DOM节点，返回null。

解决办法：
有两种更可靠的处理方式：

方式一：先渲染再设置id #

把draw()操作提前，确保行已经渲染到DOM后再获取节点赋值：

// 添加行到内存
var newRow = table_modal_itemfg.row.add([
    '<input type="hidden" class="" value="'+ obj.id +'" id="itemfg_id'+obj.id+'">'+no,
    '<input type="hidden" readonly id="item_code_'+obj.id+'" value="'+obj.item_code+'" class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_code+'">'+obj.item_code,
    '<input type="hidden" readonly id="item_name_'+obj.id+'" value="'+obj.item_name+'" class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_name+'">'+obj.item_name,
    '<input type="hidden" readonly id="item_measur_'+obj.id+'" value="'+obj.item_measur+'" class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_measur+'">'+obj.item_measur,
    '<input type="hidden" readonly id="item_weight_'+obj.id+'" value="'+obj.item_weight+'" class="form-control input-sm" data-toggle="tooltip" data-placement="top" title="'+obj.item_weight+'">'+obj.item_weight,
    '<div style="text-align:center;"><button type="button" class="btn btn-info btn-sm" onclick="adddata('+obj.id+',\''+obj.item_name+'\',\''+field+'\')" data-toggle="tooltip" data-placement="top" title="Search"><span class="fa fa-check"> </span></button></div>',
]);
// 先渲染到DOM
table_modal_itemfg.draw(false);
// 现在可以获取到节点并设置id了
newRow.node().id = obj.id;

方式二：用Datatable内置的rowId配置（更推荐） #

初始化Datatable时指定rowId选项，让它自动帮你设置行的id，不用手动操作DOM：

var table_modal_itemfg = $('#table_modal_itemfg').DataTable({
    // 其他配置（比如分页、排序等）可以保留
    rowId: function() {
        return obj.id; // 直接绑定当前循环的obj.id作为行id
    }
});

这样每次row.add()之后，Datatable会自动把行的id设置为你指定的值，完全不用手动处理.node()，代码更简洁也更符合Datatable的设计规范。

3. 额外检查：确保Ajax返回的每个obj都有id属性 #

虽然当前错误是node()为null，但也可以顺便确认下Ajax返回的data数组里，每个对象都存在有效的id值，避免后续出现其他问题。可以在$.each里加个判断：

$.each(data, function(index, obj){
    if(!obj.id) {
        console.warn('Missing id for item at index', index);
        return; // 跳过这条数据
    }
    // 后续添加行的代码
});

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