如何克隆使用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/