我正在尝试使用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。有人知道吗?
答案 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>