克隆表并修改克隆会修改原始元素答案

【问题标题】：Cloning a table and modifying the clone modifies the original element克隆表并修改克隆会修改原始元素
【发布时间】：2013-03-27 03:15:19
【问题描述】：

我有一个巨大的表，我想克隆并将克隆分成 2 个单独的表，保持原始表不变。

假设原始表名为#MainTable，有 10 列

我创建了一个克隆#CloneTable，它最初还包含#MainTable 的所有 10 列

现在，我更改#CloneTable，使#CloneTable 具有前5 列，另一个表#RemainingClone 具有剩余5 列

现在，这里发生的情况是，我的原始表 #MainTable 突然也丢失了 5 列并更新为仅保留 #CloneTable 具有的那些列。

#MainTable 是否应该不受对 #CloneTable 所做更改的影响？

编辑 1：我正在使用 jquery clone()，如标签所示。

编辑 2：这是一些代码 -

 $("#MainTable").clone().attr('id', 'CloneTable').appendTo("#printingDiv");
 splitTable();


function splitTable() {
     var divider = 5;
     var $tableOne = $('table').attr('id','CloneTable');
     var $tableTwo = $tableOne.clone().attr('id','RemainingClone').appendTo('#printingDiv');

     // number of rows in table
     var numOfRows = $tableOne.find('tr').length;

     // select rows of each table
     var $tableOneRows = $tableOne.find('tr');
     var $tableTwoRows = $tableTwo.find('tr');

     // loop through each row in table one.
     // since table two is a clone of table one,
     // we will also manipulate table two at the same time.
     $tableOneRows.each(function(index){
         // save row for each table
         var $trOne = $(this);
         var $trTwo = $tableTwoRows.eq(index);

         // remove columns greater than divider from table one
         $trOne.children(':gt('+divider+')').remove();
         $trTwo.children(':lt('+(divider+1)+')').remove();
    });
}

【问题讨论】：

看到这种行为时，请发布一些您正在使用的代码。
您如何创建和更改 #CloneTable 的 ID，来自文档：“使用 .clone() 会产生具有重复 id 属性的元素的副作用，这些属性应该是唯一的. 在可能的情况下，建议避免使用此属性克隆元素或使用类属性作为标识符。"
您正在将所有表的 ID 更改为“CloneTable”，包括“MainTable”，其副作用是 $tableOne 引用了两个 DOM 元素。

标签： jquery clone

【解决方案1】：

这里有一个小提琴，展示了你描述的方式：DEMO。我没有看到您描述的行为（即原始版本及其一些克隆被修改）。

$(function() {
    var firstFive = $('#main').clone();
    var secondFive = $('#main').clone();
    $('body').append(firstFive);
    $('body').append(secondFive);
    firstFive.find('tr').each(function() { 
        $(this).find('td:gt(4)').remove()
    });
    secondFive.find('tr').each(function() { 
        $(this).find('td:lt(5)').remove()
    });
})

HTML

<table id="main">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
        <td>1.6</td>
        <td>1.7</td>
        <td>1.8</td>
        <td>1.9</td>
        <td>1.10</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
        <td>2.6</td>
        <td>2.7</td>
        <td>2.8</td>
        <td>2.9</td>
        <td>2.10</td>
    </tr>
</table>

希望对你有帮助。

编辑：这是在代码示例之前发布的。

【讨论】：

代码中的错误是var $tableOne = $('table') - 它同时选择了#MainTable 和#CloneTable，因为它们都是<table> 元素，然后实际上将两者的ID 更改为'CloneTable'这是不正确的，但不是您在此处看到的问题

【解决方案2】：

在您正在调用的splitTable() 函数中：

var $tableOne = $('table').attr('id','CloneTable');

这会将 all <table> 元素的 ID 设置为“CloneTable”，包括最初克隆它的那个“MainTable”，并引用这两个 DOM 元素。对此 jQuery 对象的所有更改现在都将影响这两个表。要获取克隆的表，您可以在创建 ID 时使用以下内容：

var $tableOne = $('table#CloneTable');

【讨论】：

伟大的收获！谢谢@doublesharp！