如何克隆使用jQuery的表中的两列

Question

我想从表中克隆2列到使用jQuery的新表。 源表如下：

<table id="sourceT"> 
    <tr> 
     <td>Col 1</td> 
     <td>Col 2</td> 
     <td>Col 3</td> 
    </tr> 
    <tr> 
     <td>Col 1 - value</td> 
     <td>Col 2 - value</td> 
     <td>Col 3 - value</td> 
    </tr> 
</table> 
<table id="targetT"></table> 

我想的是什么，

$("#sourceT").find("tr > td:nth-child(1), tr > td:nth-child(2)").each(function() { 
    $("#targetT").append($("<tr></tr>").append($(this).clone())); 
}); 

我只是想第一和第二列复制到一个新的表像

<table id="targetT"> 
    <tr> 
     <td>Col 1</td> 
     <td>Col 2</td> 
    </tr> 
    <tr> 
     <td>Col 1 - value</td> 
     <td>Col 2 - value</td> 
    </tr> 
</table> 

但使用这些jquery，我只能得到如下;

<table id="targetT"> 
    <tr> 
     <td>Col 1</td> 
    </td> 
    <tr> 
     <td>Col 1 - value</td> 
    </td> 
    <tr> 
     <td>Col 2</td> 
    </td> 
    <tr> 
     <td>Col 2 - value</td> 
    </td> 
</table> 

我不是要循环中的所有tr和从源表TD的。 Coz，我的源表将超过数千行和超过50列。 任何人有任何想法？

Answer 1

我可能会做这样的事情：

var $target = $("#targetT"); 
$("#sourceT tr").each(function() { 
    var $tds = $(this).children(), 
     $row = $("<tr></tr>"); 
    $row.append($tds.eq(0).clone()).append($tds.eq(1).clone()).appendTo($target); 
}); 

演示：http://jsfiddle.net/HwzQg/

也就是说，遍历每个源表格的一行，只需复制所需的列。通过这种方式，所需列是否相邻并不重要，如果需求发生更改，则可以轻松更改代码以复制更多列。事实上，你可以很容易地将其封装在需要的源和目标表作为参数与列号的列表以及复制功能：

function copyColumns(srcTableId, targetTableId) { 
    var colNos = [].slice.call(arguments,2), 
     $target = $("#" + targetTableId); 
    $("#" + srcTableId + " tr").each(function() { 
     var $tds = $(this).children(), 
      $row = $("<tr></tr>"); 
     for (var i = 0; i < colNos.length; i++) 
      $row.append($tds.eq(colNos[i]).clone()); 
     $row.appendTo($target); 
    }); 
} 

copyColumns("sourceT", "targetT", 0, 1); 
// NOTE that this allows you to easily re-order the columns as you copy them: 
copyColumns("sourceT", "targetT", 1, 0, 2); 

这使用arguments让你有任何数量的列序号的单独的参数，但当然你可以修改它，而不是接受一个列数的数组。无论什么对你有用。

演示：http://jsfiddle.net/HwzQg/1/

“我不是想循环中的所有TR和TD的从源表堂妹，我的源表会比几千行以上和超过50周的cols”。

我不担心源表的大小。代码首先获得您需要的结果，然后在性能较差的情况下优化代码。你所显示的代码有点隐含地循环遍历原始表格两次，无论如何都是td:nth-child(1)，然后是td:nth-child(2)。

Answer 2

$('#sourceT tr') 
     .clone() 
     .find('td:gt(1)') 
     .remove() 
     .end() 
     .appendTo('#targetT'); 

http://jsfiddle.net/C7dKF/

Answer 3

尝试

$('#sourceT tr').clone().appendTo('#targetT') 
$('#targetT tr').find('td :gt(1)').remove(); 

演示：Fiddle

OR

var clone = $('#sourceT tr').clone() 
clone.find('td :gt(1)').remove(); 
clone.appendTo('#targetT') 

演示：Fiddle

我可能更喜欢或部分由于DOM被更新一次

Answer 4

您可以使用此：

$("#sourceT tr").each(function(index) { 
    var newRow = $("<tr></tr>"); 
    $(this).find("td:lt(2)").each(function() { 
     newRow.append($(this).clone()); 
    }) 
    $("#targetT").append(newRow); 
}); 

工作演示：http://jsfiddle.net/jfriend00/JRwVN/

或使用更多的链接，而不是.each()一个更紧凑的版本：

$("#sourceT tr").each(function(index) { 
    var newRow = $("<tr></tr>"); 
    $(this).find("td:lt(2)").clone().appendTo(newRow); 
    $("#targetT").append(newRow); 
}); 

演示：http://jsfiddle.net/jfriend00/QRVfE/

任何代码，regar无论选择者如何，发现你想要的列将在表格的每一行看。走DOM（这是这些选择器操作所做的）并不是一个缓慢的操作。什么是缓慢的操作是创建新的DOM对象并将它们插入到DOM中，并且在您的情况下无法避免这种情况。

如果性能是非常关键的（在攻击它之前你应该证明一个问题其实是一个问题），实际上有时候创建一个巨大的HTML字符串并将其一次性放入DOM，而不是插入单个DOM对象。

如果性能很关键，那么构建HTML字符串的版本在Chrome，IE10和Firefox中似乎要快大约20％。它的工作原理是这样的：

var newTable = ""; 
$("#sourceT tr").each(function(index) { 
    newTable += "<tr>"; 
    $(this).find("td:lt(2)").each(function() { 
     newTable += "<td>" + this.innerHTML + "</td>"; 
    }); 
    newTable += "</tr>"; 
}); 
$("#targetT").html(newTable); 

演示：http://jsfiddle.net/jfriend00/MDAKe/

而且，在过去的两个方法比较jsperf：http://jsperf.com/table-copy

我敢肯定还有其他的方法来提高性能（通常是自己的jQuery不会给你最快的运行代码）。

---

事实证明，消除所有的jQuery使得约8-12x更快（取决于浏览器）：

var newTable = ""; 
var rows = document.getElementById("sourceT").rows; 
for (var i = 0, len = rows.length; i < len; i++) { 
    var cells = rows[i].cells; 
    newTable += "<tr><td>" + cells[0].innerHTML + "</td><td>" + cells[1].innerHTML + "</td></tr>"; 
} 
document.getElementById("targetT").innerHTML = newTable; 

演示：http://jsfiddle.net/jfriend00/7AJk2/