下面的代码会在我单击单元格值时打印random fruits 表的值。问题是我正在尝试创建一个函数，允许我通过单击例如 kiwi 将 random fruits 表的值移动到红色水果表中，它将移动到红色水果表中，我还希望能够将我移动到 red fruits 表中的值移回到 random fruits 表中。我尝试使用数组推送方法来做到这一点，但它只将值复制到另一个表中，而不是完全移动它。有什么简单的方法可以做到这一点，我们将不胜感激，谢谢!
var obj = {};
var obj2 = {};
var key = "Red Fruits";
obj[key] = ['Apple', 'Cherry', 'Strawberry'];
var myArray = [];
myArray.push(obj);
var key2 = "Green Fruits";
obj[key2] = ['Watermelon', 'Durian', 'Avacado'];
var myArray2 = [];
myArray2.push(obj);
var key3 = "Random Fruits";
obj2[key3] = ['Kiwi', 'Pomegranate', 'Honeydew', 'Plum'];
var myArray3 = [];
myArray3.push(obj2);
var $header = $("<tr>"),
cols = 0,
bodyString = "";
$.each(obj, function(key, values) {
cols = Math.max(cols, values.length);
$header.append($('<th/>').text(key + ": " + values.length));
});
for (var i = 0; i < cols; i++) {
bodyString += '<tr>';
$.each(obj, function(key, values) {
bodyString += '<td>' +
(values[i] ? values[i] : "") +
'</td>';
});
bodyString += '</tr>';
}
$('.fruitsclass thead').html($header);
$('.fruitsclass tbody').html(bodyString);
var bodyString = '';
var headString = '';
$.each(obj2[key3], function(index) {
bodyString += ('<tr><td>' + obj2[key3][index] + '</td></tr>');
});
headString += ('<tr><th>' + 'Random Fruits' + '</th></tr>');
$('.fruityclass tbody').html(bodyString);
$('.fruityclass thead').html(headString);
$(document).ready(function() {
$("#fruityid td").click(function() {
getval(this);
});
});
function getval(cel) {
alert(cel.innerHTML);
}.class {
font-family: Open Sans;
}
.center {
display: flex;
justify-content: center
}
.skillsTable th {
border-left: 1px solid #AAA5A4;
border-right: 1px solid #AAA5A4;
}
table {
float: left;
border-collapse: collapse;
width: 70%
}
td {
border-left: 1px solid #AAA5A4;
border-right: 1px solid #AAA5A4;
padding-top: 8px;
padding-left: 11px;
font-size: 15px;
}
th {
color: #0080ff;
font-weight: normal;
border-bottom: 1px solid #AAA5A4;
padding-bottom: 5px;
}
div {
margin-bottom: 50px;
}<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="//#" />
</head>
<body>
<div id="result"> </div>
<div class="center">
<table id="fruitsid" class="fruitsclass skillsTable class">
<thead></thead>
<tbody></tbody>
</table>
</div>
<div class="center">
<table id="fruityid" class="fruityclass skillsTable class">
<thead></thead>
<tbody></tbody>
</table>
</div>
</body>
</html>最佳答案
在您的代码之上，更改 listener 函数以删除节点:
function listener(obj) {
tbl = document.getElementById("fruitsTable");
if (tbl != null) {
for (var i = 0; i < tbl.rows.length; i++) {
for (var j = 0; j < tbl.rows[i].cells.length; j++)
tbl.rows[i].cells[j].onclick = function () {
getval(this);
data = this.innerHTML;
k1 = Object.keys(obj).find(k => obj[k].indexOf(data) >= 0 )
if (k1 != 'Random Fruits') {
key = 'Random Fruits'
} else {
key = 'Red Fruits';
}
index = obj[k1].indexOf(data);
obj[k1].splice(index, 1);
obj[key].push(data);
redraw(obj);
listener(obj);
};
}
}
}
它找到相关的 key 并从该数组中删除该元素，并将其插入 k2。完成后，它会重新绘制 UI。
fiddle - https://jsfiddle.net/wqzsn7ou/
关于javascript - 将表行移动到另一个表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50810566/