如何使用jQuery复制备用表中的表行

时间：2018-06-21 06:37:16

标签： javascript jquery html css

我正在尝试使用jquery交换两个表行，我已经使用javascript做到了，但是不知道如何使用jquery做到这一点。

我做到了

function addTable1(val)
{
	var newRow = table.insertRow(table.length),
	cell1 = newRow.insertCell(0),
	value = val;

	cell1.innerHTML = value;
	clickTable2();
	clickTable1();
}

function clickTable1()
{
	for(var i = 1; i < table.rows.length; i++)
	{
		table.rows[i].onclick = function()
		{
			rIndex = this.rowIndex;
			data = this.cells[0].innerHTML;
			addTable2(data);
			removeSelectedRow();
		};
	}
}

function clickTable2()
{
	for(var i = 1; i < table2.rows.length; i++)
	{
		table2.rows[i].onclick = function()
		{
			rIndex2 = this.rowIndex;
			data = this.cells[0].innerHTML;
			addTable1(data);
			removeSelectedRow2();
		};
	}
}

function addTable2(val)
{
	var newRow = table2.insertRow(table.length),
	cell1 = newRow.insertCell(0),
	value = val;

	cell1.innerHTML = val;
	clickTable1();
	clickTable2();
}

function removeSelectedRow()
{
	table.deleteRow(rIndex);
}

function removeSelectedRow2()
{
	table2.deleteRow(rIndex2);
}

var rIndex, table = document.getElementById("table");
var rIndex2, table2 = document.getElementById("table2");
var data1, data2;

clickTable1();
clickTable2();
.grid {
    width: 600px;
    height: 500px;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px 50px 50px 50px;
    border-radius: 50px;
    border: 2px solid #cbcbcb;
    box-shadow: 10px 15px 5px #cbcbcb;
}

.container {
	overflow: hidden
}

.tab { 
	float: left;
}

.tab-2 {
	margin-left: 50px 
}
.tab-2 input {
	display: block;
	margin-bottom: 10px
}

tr {
	transition:all .25s ease-in-out
}
tr:hover {
	background-color:#EEE;cursor: pointer
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>add row/column</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="tab tab-1">
			<table id="table" border="1">
				<tr>
					<th>table1 text</th>
				</tr>
				<tr>
					<td>A1</td>
				</tr>
				<tr>
					<td>B2</td>
				</tr>
				<tr>
					<td>C3</td>
				</tr>
			</table>
		</div>
		<div class="container">
			<div class="tab tab-2">
				<table id="table2" border="1">
					<tr>
						<th>table2 text</th>
					</tr>
					<tr>
					<td>1A</td>
				</tr>
				<tr>
					<td>2B</td>
				</tr>
				<tr>
					<td>3C</td>
				</tr>
				</table>
			</div>
		</div>
	</div>

	<script>
		var rIndex, table = document.getElementById("table");
	</script>

	<script src="app.js"></script>
</body>
</html>

在此代码中，如果单击表一的某个元素，则该元素将复制到另一个表，并从上一个表中删除。我需要用jQuery。有人知道吗？

4 个答案:

答案 0 :(得分：1)

以下是使用jquery的演示：https://codepen.io/creativedev/pen/KeoQOE 

$(document).on('click','#table tr, #table2 tr',function(e){
  console.log($(this).parents('table'))
  $('table').not($(this).parents('table')).append('<tr>'+$(this).html()+'</tr>');
  $('table').find(this).remove();
})

答案 1 :(得分：0)

在这里，我已将您的代码更新为jQuery。希望这是您所期望的。

function clickTable1() {
    table.on('click', 'tr :not(:first)', function() {
        rIndex = $(this).index();
        table2.find('tr:last').after(`<tr><td>${$(this).text()}</dt></tr>`);
        $(this).remove();
    });
}

function clickTable2() {
    table2.on('click', 'tr :not(:first)', function() {
        rIndex = $(this).index();
        table.find('tr:last').after(`<tr><td>${$(this).text()}</dt></tr>`);
        $(this).remove();
    });
}

var table = $("#table");
var table2 = $("#table2");

clickTable1();
clickTable2();
.grid {
    width: 600px;
    height: 500px;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px 50px 50px 50px;
    border-radius: 50px;
    border: 2px solid #cbcbcb;
    box-shadow: 10px 15px 5px #cbcbcb;
}

.container {
	overflow: hidden
}

.tab { 
	float: left;
}

.tab-2 {
	margin-left: 50px 
}
.tab-2 input {
	display: block;
	margin-bottom: 10px
}

tr {
	transition:all .25s ease-in-out
}
tr:hover {
	background-color:#EEE;cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<div class="container">
		<div class="tab tab-1">
			<table id="table" border="1">
				<tr>
					<th>table1 text</th>
				</tr>
				<tr>
					<td>A1</td>
				</tr>
				<tr>
					<td>B2</td>
				</tr>
				<tr>
					<td>C3</td>
				</tr>
			</table>
		</div>
		<div class="container">
			<div class="tab tab-2">
				<table id="table2" border="1">
					<tr>
						<th>table2 text</th>
					</tr>
					<tr>
					<td>1A</td>
				</tr>
				<tr>
					<td>2B</td>
				</tr>
				<tr>
					<td>3C</td>
				</tr>
				</table>
			</div>
		</div>
	</div>

答案 2 :(得分：0)

尝试一下： 

$(document).ready(function(){
  $('table').on('click','td',function(){

    var currentTable = $(this).closest('table').attr('id');
    var anotherTable = (currentTable === 'table') ? 'table2' : 'table' ;

    $("<tr><td>"+$(this).html()+"</td></tr>").appendTo("#"+anotherTable);
    $(this).closest('tr').remove();

  })
})


$(document).ready(function(){
  $('table').on('click','td',function(){
    var currentTable = $(this).closest('table').attr('id');
    var anotherTable = (currentTable === 'table') ? 'table2' : 'table' ;
    $("<tr><td>"+$(this).html()+"</td></tr>").appendTo("#"+anotherTable);
    $(this).closest('tr').remove();
  })
})
.container { overflow: hidden; }

.tab { float: left; }

.tab-2 { margin-left: 50px; }

.tab-2 input { display: block; margin-bottom: 10px; }

tr { transition:all .25s ease-in-out; }

tr:hover { background-color:#EEE; cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
  <div class="tab tab-1">
    <table id="table" border="1">
      <tr><th>table1 text</th></tr>
	  <tr><td>A1</td></tr>
	  <tr><td>B2</td></tr>
	  <tr><td>C3</td></tr>
	</table>
  </div>

  <div class="container">
    <div class="tab tab-2">
	  <table id="table2" border="1">
	    <tr><th>table2 text</th></tr>
	    <tr><td>1A</td></tr>
	    <tr><td>2B</td></tr>
	    <tr><td>3C</td></tr>
	  </table>
    </div>
  </div>
</div>

答案 3 :(得分：-1)

您可以像这样委派点击事件

$("#table").delegate('tr', 'click', function () {
        $("#table2").append("<tr>" + $(this).html() + "</tr>");
        $(this).remove();
    });
    $("#table2").delegate('tr', 'click', function () {
        $("#table").append("<tr>" + $(this).html() + "</tr>");
        $(this).remove();
    });
.grid {
    width: 600px;
    height: 500px;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px 50px 50px 50px;
    border-radius: 50px;
    border: 2px solid #cbcbcb;
    box-shadow: 10px 15px 5px #cbcbcb;
}

.container {
	overflow: hidden
}

.tab { 
	float: left;
}

.tab-2 {
	margin-left: 50px 
}
.tab-2 input {
	display: block;
	margin-bottom: 10px
}

tr {
	transition:all .25s ease-in-out
}
tr:hover {
	background-color:#EEE;cursor: pointer
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>add row/column</title>
	<link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="tab tab-1">
			<table id="table" border="1">
				<tr>
					<th>table1 text</th>
				</tr>
				<tr>
					<td>A1</td>
				</tr>
				<tr>
					<td>B2</td>
				</tr>
				<tr>
					<td>C3</td>
				</tr>
			</table>
		</div>
		<div class="container">
			<div class="tab tab-2">
				<table id="table2" border="1">
					<tr>
						<th>table2 text</th>
					</tr>
					<tr>
					<td>1A</td>
				</tr>
				<tr>
					<td>2B</td>
				</tr>
				<tr>
					<td>3C</td>
				</tr>
				</table>
			</div>
		</div>
	</div>


	<script src="app.js"></script>
</body>
</html>

相关问题
最新问题