jQuery调用clone()实现表格动态加行时，如何避免克隆<td>内已输入的文本

问题本质 #

jQuery.clone()默认会完整保留元素的所有运行时状态——这部分状态除了静态的DOM属性，还包括input元素上用户已经输入的内容（这类值属于元素的内存临时状态，不在DOM结构里）。直接把原行克隆后插入，自然会把原行已经填好的内容一起带到新行里，达不到“生成完全空白新行”的预期。

调整逻辑 #

不需要重写原有DOM结构，只需要在克隆行、插入表格的中间环节加一步新行表单内容清空的操作，流程拆成三步：

• 克隆最后一行的完整DOM结构，先暂存为新的行对象，不直接插入表格
• 遍历新行对象里的所有表单输入控件，把值全部重置为空白
• 把清空完成的新行插入到当前最后一行的后面

另外可以补充两个体验优化：

• 阻止Tab键的默认焦点跳转行为，避免按完Tab焦点跑到页面其他位置
• 新行插入完成后，自动把焦点定位到新行的第一个输入框，支持连续录入

可直接替换的交互代码 #

$('#some_table').on('keydown', 'input', function (e) {
    // 非Tab键事件直接跳过
    if (e.keyCode !== 9) return;
    e.preventDefault(); // 阻断Tab默认的全局焦点跳转

    const $targetInput = $(this),
          $table = $('#some_table'),
          $lastRow = $table.find('tr:last'),
          $lastRowLastCell = $lastRow.find('td:last');

    // 校验当前输入框是否属于最后一行的最后一列
    if ($targetInput.closest('td').is($lastRowLastCell)) {
        // 克隆行结构
        const $emptyNewRow = $lastRow.clone();
        // 清空新行内所有输入框的已有值
        $emptyNewRow.find('input').val('');
        // 插入空白新行
        $emptyNewRow.insertAfter($lastRow);
        // 自动聚焦新行第一个输入框，保证录入流畅
        $emptyNewRow.find('input').first().focus();
    }
});

扩展适配说明 #

如果后续表格行里加入了其他表单控件（比如多行输入框、下拉选择框），只需要把清空逻辑的选择器扩展为覆盖所有表单元素即可：

• 对textarea直接用.val('')清空文本
• 对select需要额外把选中项重置为默认的第一个选项

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