使用jQuery表格插件时，如何为动态输入框赋予单元格ID？

我看了你的问题，核心问题在于你尝试给input赋值ID的时候，这个input还没有被插入到DOM的<td>元素中，所以input.closest('td')根本找不到父级td，自然拿不到对应的ID值。

问题根源分析 #

当你在第75行执行input.id = input.closest('td').prop("id");时，input只是刚用document.createElement创建出来的内存元素，还没有被追加到目标td里，它此时没有任何父级DOM节点，closest('td')会返回空，所以赋值操作完全无效。

解决方案：提前获取td的ID再赋值 #

我们可以在创建input之前，先拿到当前td的ID，再把这个ID直接赋值给input，具体步骤如下：

1. 在触发编辑的逻辑中先获取td的ID
   假设你是在点击td时触发编辑，那么在调用创建input的函数前，先获取当前td的ID：

   // 比如在td的点击事件里
   $('td').on('click', function() {
     var $td = $(this);
     var tdId = $td.attr('id'); // 先拿到当前td的ID
     var input = createInput('text', $td.text(), tdId); // 把tdId作为参数传入
     $td.empty().append(input);
     // 其他逻辑...
   });
   

2. 修改createInput函数，接收tdId参数并赋值
   调整你的createInput函数，新增一个参数来接收td的ID，直接赋值给input：

   function createInput(type, value, tdId) {
     var input = document.createElement('input');
     input.type = type;
     input.value = value;
     input.id = tdId; // 直接使用传入的tdId
     // 你原有的其他配置逻辑...
     return input;
   }
   

   如果是创建select元素，同理，在创建select时也传入tdId并赋值给select的ID属性。

3. 在失焦事件中获取ID
   现在在第86行和第95行，你就可以通过var idValue = input.prop("id");拿到正确的td对应的ID了，后续就能用这个ID执行AJAX更新操作。

额外提醒：避免ID重复 #

如果你的表格里多个td的ID可能重复，建议给input/select的ID加个前缀（比如edit-），避免DOM中出现重复ID的问题：

input.id = 'edit-' + tdId;

这样修改后，就能成功把td的ID传递给动态生成的输入框，后续的AJAX更新逻辑也能正常拿到这个ID啦！

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