Question

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

假设原始表名为#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();
    });
}

Answer 1

在您呼叫的splitTable()功能中：

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

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

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

Answer 2

这是一个小提琴，展示了你所描述的方式：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>

希望它有所帮助。

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

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

编辑2：这是一些代码 -

2 个答案: