如何使用jQuery克隆表中的两列 [英] How to clone two columns in a table using jQuery

问题描述

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

I am trying to clone 2 columns from a table to a new table using jQuery. The source table is below:

<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()));
});

我只想将第一列和第二列复制到新表中，如

I only want to copy first and second columns to a new table like

<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，我只能得到以下结果;

But using those jquery, I only get like below;

<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列。
任何人都有任何想法？

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. Anyone has got any ideas?

推荐答案

我可能会这样做：

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/

也就是说，循环遍历源表的每一行，只需复制所需的列。这样，所需列是否相邻无关紧要，如果需求发生变化，很容易更改代码以复制更多列。事实上，您可以轻松地将其封装在一个函数中，该函数将源表和目标表作为参数以及要复制的列号列表：

That is, loop through each row of the source table and just copy the required columns. This way it doesn't matter if the required columns are adjacent, and it is easy to change the code to copy more columns if your requirement changes. In fact you could easily encapsulate it in a function that takes the source and target tables as parameters along with a list of which column numbers to copy:

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);

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

This uses arguments to let you have any number of column numbers as separate arguments, but of course you could modify it to instead accept an array of column numbers. Whatever works for you.

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

我没有尝试循环所有的tr和td源表。因为，我的源表将超过数千行和超过50列。

我不担心源表的大小。代码首先获得您需要的结果，然后在性能不佳时优化代码。您显示的代码有点隐含地循环遍历原始表两次，无论如何使用 td：nth-​​child（1）然后 td：nth-​​child （2）。

I wouldn't worry about the size of the source table. Code to get the result you need first, and then optimise the code if the performance is poor. The code you showed is kind of implicitly looping through the original table twice anyway with td:nth-child(1) and then td:nth-child(2).

这篇关于如何使用jQuery克隆表中的两列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！