修改DataTables输入列后更新数据源遇undefined错误求助

问题原因 #

你当前代码里的table.cell(this)传入的是input元素，但DataTables的cell()方法需要接收的是单元格（td）元素，所以无法找到对应的表格单元格，导致控制台抛出undefined错误。

修正方案 #

1. 找到输入框所在的<td>元素，用$(this).closest('td')获取
2. 无需手动设置input的value属性，change事件触发时输入框的值已经是最新的
3. 通过正确的单元格对象更新DataTables数据源

修正后的代码 #

$('#kwrdsTable').on('change', 'tr > td > input', function(e){
    var table = $('#kwrdsTable').DataTable();
    // 获取输入框所在的td单元格
    const tdElement = $(this).closest('td');
    // 获取新值（如果是数值类型转float，否则直接保留原输入）
    const newValue = parseFloat($(this).val()) || $(this).val();
    // 更新DataTables对应单元格的数据源
    table.cell(tdElement).data(newValue);
    
    // 验证更新结果（可选）
    console.log('更新后的数据:', table.cell(tdElement).data());
});

额外说明 #

• 更新数据源后，后续调用DataTables的API（比如table.rows().data()）就能获取到最新的表格数据
• 如果你的表格启用了服务端模式（serverSide: true），还需要额外处理服务端的数据同步，前端更新后要发送请求到后端保存修改

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