DataTable行复制及添加input元素后刷新DOM的实现问题

没问题，我来帮你调整代码实现这个需求！下面是针对你的场景优化后的方案，包含添加input元素、处理DOM渲染以及动态元素的事件绑定：

首先我们要修改原有的行复制逻辑，把纯文本单元格替换成包含<input>的HTML结构，同时适配DataTables的DOM管理机制，确保动态元素能正常渲染和交互。

1. 修改行复制核心代码 #

原来的逻辑是提取单元格文本存入数组，现在我们要为每个单元格生成带input的HTML内容：

// 将表格1的行移至表格0
$('#DataTable1 tbody').on('dblclick', 'tr', function (event) {
    // 创建数组存储带input的HTML内容
    var data = [];
    // 遍历源行的每个单元格，生成带input的HTML
    $(this).find('td').each(function () {
        // 先转义文本中的特殊字符，避免XSS和HTML语法问题
        var cellText = $('<div>').text($(this).text().trim()).html();
        // 生成带默认值的input元素，添加统一类名方便后续操作
        data.push(`<input type="text" value="${cellText}" class="table-edit-input" />`);
    });
    // 向目标表格添加行（dt是你的目标DataTable实例）
    dt.row.add(data);
    // 绘制表格，false参数保持当前分页位置不跳转
    dt.draw(false);
});

2. 确保DataTables正确渲染HTML #

如果目标表格初始化时出现HTML被转义的情况，需要在列配置中明确允许HTML渲染：

// 目标表格初始化示例
var dt = $('#targetTable').DataTable({
    columns: [
        { title: '列1', render: function(data) { return data; } },
        { title: '列2', render: function(data) { return data; } },
        // 其他列按此格式配置
    ]
});

render: function(data) { return data; }会告诉DataTables直接渲染传入的HTML内容，而不是转义成纯文本。

3. 处理动态Input的事件绑定 #

因为复制的行是动态生成的，直接绑定事件会失效，需要用事件委托来监听交互：

// 监听目标表格中input的输入事件
$('#targetTable tbody').on('input', '.table-edit-input', function() {
    // 获取当前input的最新值
    var currentValue = $(this).val();
    // 同步更新DataTables的数据源（可选，根据你的业务需求）
    var targetRow = dt.row($(this).closest('tr'));
    var rowData = targetRow.data();
    // 找到当前input所在的列索引，更新对应位置的内容
    rowData[$(this).closest('td').index()] = `<input type="text" value="${$('<div>').text(currentValue).html()}" class="table-edit-input" />`;
    targetRow.data(rowData).draw(false);
});

关键注意点 #

• 转义特殊字符：用$('<div>').text(cellText).html()处理文本，避免引号、尖括号等破坏HTML结构，同时防范XSS风险。
• 数据源同步：如果需要后续导出、排序等操作能获取input的最新值，一定要在输入事件中更新DataTables的行数据。
• 保持分页位置：draw(false)参数会让表格刷新后停留在当前分页，提升用户体验。

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