0

我有一个巨大的表，我想克隆并将克隆分成 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();
    });
}
4

2 回答 2

2

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

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

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

var $tableOne = $('table#CloneTable');
于 2013-04-04T21:15:00.983 回答
0

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

JS

$(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>

希望能帮助到你。

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

于 2013-04-04T21:12:45.583 回答