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 多个列。有人有什么想法吗？

score 7 · Accepted Answer

我可能会做这样的事情：

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 多个列。”

我不会担心源表的大小。代码先得到你需要的结果，如果性能不好再优化代码。您显示的代码有点隐式循环原始表两次，无论如何，td:nth-child(1)然后td:nth-child(2)。

score 5 · Accepted Answer

你可以使用这个：

$("#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/

无论选择器如何，任何找到所需列的代码都将在表的每一行中查找。遍历 DOM（这些选择器操作就是这样做的）并不是一个缓慢的操作。缓慢的操作是创建新的 DOM 对象并将它们插入到 DOM 中，在您的情况下无法避免这种情况。

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

如果性能很关键，那么在 Chrome、IE10 和 Firefox 中构建 HTML 字符串的版本似乎要快 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-12 倍（取决于浏览器）：

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/

score 2 · Accepted Answer

尝试

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

演示：小提琴

或者

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

演示：小提琴

我可能更喜欢 OR 部分，因为 dom 只更新一次

score 1 · Accepted Answer

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

http://jsfiddle.net/C7dKF/

score -1 · Accepted Answer

我有 goog 方式，如何玩列，我在这里写完整代码：

function add_column(copy, paste)
{
		$("."+copy+":first").clone().appendTo("."+paste);
		$("."+paste+" tr:last input").val('');
		$("."+paste+" tr:last select").val('');
		// and etc...
}

function remove_column(e, paste)
{
		var how = $("."+paste+" tr").length;
		if(how >= 2)
		{
				$(e).parent().parent().remove();
		} else {
				$("."+paste+" input").val('');
				$("."+paste+" select").val('');
				// and etc...
		}
}

<div class="tab-pane fade" id="atostogos">
										<div class="panel-body">

											<form action="" method="post" autocomplete="off">
											<div class="table-responsive">
												<table class="table table-striped table-bordered">
													<thead>
														<tr>
															<th width="30%">Priežastis</th>
															<th width="15%">Data nuo</th>
															<th width="15%">Data iki</th>
															<th width="30%">Pastabos</th>
															<th width="10%">Veiksmai</th>
														</tr>
													</thead>
													<tbody class="paste_place">
															<tr class="copy_item">
																	<td><input type="text" name="priezastis[]" class="form-control" placeholder="Įveskite..."/></td>
																	<td><input type="text" name="data_nuo[]" class="form-control datepicker" placeholder="Įveskite..."/></td>
																	<td><input type="text" name="data_iki[]" class="form-control datepicker" placeholder="Įveskite..."/></td>
																	<td><input type="text" name="pastabos[]" class="form-control" placeholder="Įveskite..."/></td>
																	<td><a onclick="add_column('copy_item', 'paste_place');"><i style="font-size: 20px;" class="icon-plus-circle2"></i></a> &nbsp;<a onclick="remove_column(this, 'paste_place');"><i style="font-size: 20px; color: red;" class="icon-minus-circle2"></i></a></td>
															</tr>
													</tbody>
												</table>
										</div>

										<div class="row" style="margin-top: 20px;">
												<div class="col-md-12">
														<div class="text-right">
															<button name="holidays_info" type="submit" class="btn btn-primary">Išsaugoti <i class="icon-arrow-right14 position-right"></i></button>
														</div>
												</div>
										</div>
									</form>

										</div>
									</div>

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

5 回答 5

Related

Reference