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

Question

我正在尝试使用 jQuery 将表中的 2 列克隆到新表。源表如下:

<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。因为，我的源表将超过数千行和超过 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);

这使用参数让您将任意数量的列号作为单独的参数，但当然您可以修改它以接受列号数组。无论什么对你有用。

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

"I am not trying to loop all the tr and td's from source table. Coz, my source table is going to be more than thousands rows and more than 50 cols."

我不会担心源表的大小。首先编写代码以获得所需的结果，如果性能较差，则再优化代码。您显示的代码是使用 td:nth-child(1) 和 td:nth-child(2) 隐式循环原始表两次。