jquery - jQueryを使用してテーブルの2つの列を複製する方法

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

最初と2番目の列を次のような新しいテーブルにコピーしたいだけです

<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列以上になります。誰かアイデアがありますか？

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 列以上になるでしょう。」

ソーステーブルのサイズは気にしません。最初に必要な結果を得るためのコードを作成し、パフォーマンスが低い場合はコードを最適化します。あなたが示したコードは、とにかく元のテーブルを 2 回暗黙的にループし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に挿入することです。この場合、それを回避する方法はありません。

パフォーマンスが非常に重要である場合（攻撃する前に実際に問題があることを証明する必要があります）、実際には、個々のDOMオブジェクトを挿入するよりも、巨大なHTML文字列を作成して一度に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/

そして、最後の2つの方法を比較する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')

デモ:フィドル

DOM は 1 回だけ更新されるため、OR 部分を好む場合があります。

score 1 · Accepted Answer

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

http://jsfiddle.net/C7dKF/

score -1 · Accepted Answer

列を操作する方法があります。ここに完全なコードを記述します。

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を使用してテーブルの2つの列を複製する方法

5 に答える 5

Related

Reference