如何获取一行中的特定列并将其传输到另一个表

时间:2017-07-19 02:13:05

标签: javascript jquery

我只想传输一个特定的列。请帮帮我。

这是我的代码:

 btnAdd.on('click', function () {

                        var trItem = $(this).closest("tr").clone();
                        trItem.find("input").remove();
                        trItem.add("<tr>").append("</tr>");

                        $("#products").append(trItem);

                        console.log(btnAdd);

})

非常感谢你。

1 个答案:

答案 0 :(得分:0)

您需要指定需要克隆的所有细胞。

函数“funcCloneRow”将克隆一行(tr)并通过“tdKeyArr”添加单元格的内容。 请记住,“tdKeyArr”是一个包含选择单元格位置的数组,如下所示:

$(function() {
	var funcCloneRow = function($table1, $table2, trIndex, tdKeyArr) {
		// define. If tdKeyArr == undefinded, all the cell in choosen tr will be cloned
		if($table1 == undefined || $table2 == undefined || trIndex == undefined) {
			return;
		}
		// clone row
		var $tr = $table1.find('tr').eq(trIndex).clone();
		// get cell content
		if(tdKeyArr != undefined) {
			$tr.children('td').text('');
			for (var i = 0; i < tdKeyArr.length; i++) {
				$tr.children('td').eq(tdKeyArr[i]).html($table1.find('tr').eq(trIndex).children('td').eq(tdKeyArr[i]).html());
			}
		}
		// append new row to second table
		if ($table2.children('tbody').length) {
			$table2.children('tbody').append($tr);
		}
		else {
			$table2.append($tr);
		}
	}
	$('table button').on('click', function(event) {
		funcCloneRow($('#table1'), $('#table2'), $(this).closest('tr').index(), [$(this).parent().index(), 1]);
	});
});
table {
	float:left;
	margin-right:100px;
	border-collapse:collapse;
	text-align:center;
	vertical-align:top;
}
table th,
table td {
	border:1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<body>
	<table id="table1">
		<tr>
			<th>head 1</th>
			<th>head 2</th>
			<th>head 3</th>
		</tr>
		<tr>
			<td>row 1</td>
			<td>row 1</td>
			<td><button>Append</button></td>
		</tr>
		<tr>
			<td>row 2</td>
			<td>row 2</td>
			<td><button>Append</button></td>
		</tr>
		<tr>
			<td>row 3</td>
			<td>row 3</td>
			<td><button>Append</button></td>
		</tr>
	</table>
	<table id="table2">
		<tr>
			<th>head 1</th>
			<th>head 2</th>
			<th>head 3</th>
		</tr>
	</table>
</body>