使用jQuery实现多表格行数据深拷贝并按条件追加问题求助

看起来你混淆了DOM元素拷贝和JavaScript对象深拷贝的用法——.clone()是用来复制页面上的DOM节点的，不是处理数据对象的深拷贝，这就是你没达到预期的原因！

1. 正确的对象深拷贝方式 #

对于JavaScript对象的深拷贝，你有两个常用且可靠的选择：

• 用jQuery内置方法：$.extend(true, {}, originalObj)，第一个参数true表示开启深拷贝，后面依次是空对象（作为拷贝容器）和要复制的原对象
• 用原生JS方法：JSON.parse(JSON.stringify(originalObj))，通过把对象转成JSON字符串再解析的方式实现深拷贝（注意：这个方法不支持函数、Symbol等特殊类型，但对普通业务数据对象完全适用）

2. 结合你的场景修改代码 #

假设你的data是一个对象数组，每个对象包含用于判断表格归属的字段（比如status，值可能是uncounted、unmatched、matched等），可以这样修改你的代码：

$.post(self.baseUrl + "ReviewCountof", {CountNo: countno}, function(data) {
    var tableAll = $('#allCount tbody');
    var tableUc = $('#Uncounted tbody');
    var tableUm = $('#Unmatch tbody');
    var tableMatched = $('#Matched tbody');
    
    // 先清空所有表格的旧数据
    tableAll.empty();
    tableUc.empty();
    tableUm.empty();
    tableMatched.empty();

    // 遍历返回的每一条数据
    $.each(data, function(index, item) {
        // 深拷贝当前数据对象，避免后续操作修改原数据
        var clonedItem = $.extend(true, {}, item); 
        // 或者用 JSON.parse(JSON.stringify(item))，二选一即可

        // 生成对应表格行的DOM结构（这里假设你的数据有name、countValue等字段，按需修改）
        var row = $('<tr>')
            .append($('<td>').text(clonedItem.name))
            .append($('<td>').text(clonedItem.countValue));

        // 把行追加到全量表格（这里用.clone()是拷贝DOM节点，因为要同时加到全量和分类表格）
        tableAll.append(row.clone());

        // 根据数据的特定条件，追加到对应分类表格
        if (clonedItem.status === 'uncounted') {
            tableUc.append(row);
        } else if (clonedItem.status === 'unmatched') {
            tableUm.append(row);
        } else if (clonedItem.status === 'matched') {
            tableMatched.append(row);
        }
    });
});

3. 关键注意点 #

• 一定要区分数据对象拷贝和DOM元素拷贝：处理业务数据用$.extend(true, {}, obj)或JSON方法，复制表格行这类DOM节点才用.clone()
• 如果需要把同一行DOM加到多个表格，必须对DOM元素调用.clone()，否则DOM节点会被从一个容器移动到另一个，而不是复制
• 确保清空表格的逻辑覆盖所有目标表格，避免旧数据残留影响展示

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