javascript - 将表格行移动到另一个表格并将其取回
问题描述
我在下面有这段代码,它允许我将值从移动Random Fruits Table
到Green Fruits Table
问题是我想尝试做到这一点,以便在我移动该值之后,我希望能够Green Fruits Table
通过相同的方式从正在单击该行,但我不希望原始值Green Table
可单击或受到影响有没有简单的方法来实现这一点?任何建议将不胜感激,谢谢。
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);
function redraw(obj) {
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);
}
function listener(obj) {
$(document).ready(function() {
$("#fruityid td").click(function() {
getval(this);
data = this.innerHTML;
k1 = Object.keys(obj2).find(k => obj2[k].indexOf(data) >= 0)
index = obj2[k1].indexOf(data);
obj2[k1].splice(index, 1);
obj[key2].push(data);
redraw(obj);
listener(obj);
});
});
}
function getval(cel) {
// alert(cel.innerHTML);
}
redraw(obj)
listener(obj);
.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>
解决方案
您不需要每次都调用 redraw 来向表中添加一行。
您需要执行以下操作才能从绿色水果表中识别新添加的水果,
这是你问jsFiddle的小提琴
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);
function redraw(obj) {
var $header = $("<tr>"),
cols = 0,
bodyString = "";
$.each(obj, function(key, values) {
cols = Math.max(cols, values.length);
$header.append($('<th class="total_count_'+key.replace(/\s/g,'_')+'"/>').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);
}
function addNewRow(fruitName) {
var tds = '<tr><td class="new-row">' + + '</td></tr>';
}
function listener(obj) {
$(document).ready(function() {
$("#fruityid td").click(function() {
getval(this);
data = this.innerHTML;
k1 = Object.keys(obj2).find(k => obj2[k].indexOf(data) >= 0)
index = obj2[k1].indexOf(data);
obj2[k1].splice(index, 1);
obj[key2].push(data);
$(".total_count_Green_Fruits").html(key2 + ': ' + obj[key2].length);
var element = $(this).detach();
$('#fruitsid > tbody').append('<tr><td></td><td class="new-green-fruit">'+element.html()+'</td></tr>'); //since we need to add to green fruit
// now, if you want
});
});
}
$('body').on('click', '.new-green-fruit', function() {
alert("clicked on new green fruit : " + $(this).html());
});
function getval(cel) {
// alert(cel.innerHTML);
}
redraw(obj);
listener(obj);
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
我所做的是,将 td 从随机水果表中分离出来,并将其附加到带有“new-green-fruit”类的绿色水果表上,这有助于区分新添加的 td 与旧的 td。
另外,我只为 new-green-fruit tds 注册了一个点击事件,所以只有在点击这些新水果时才会收到警报
推荐阅读
- xml - 与使用 su 连接多个 XML 标记相关
- java - Codename One & SQLite 连续测试 & 接收 java.lang.UnsatisfiedLinkError org.sqlite.NativeDB._open(Ljava/lang/String;I)V 异常
- caffe - 如何修复“在图像中找不到 JPEG 数据”
- amazon-web-services - 如何使用 go-cloud s3blob 设置公共阅读?
- python - RobotFramework 'ASCII' 编解码器无法解码位置 1 中的字节 0xd7:序数不在范围内(128)
- java - 方法 'set(double)' 从未用于我的双变量,但它用于我的字符串变量 - 在这个 arraylist 类中
- reactjs - 使用自定义 Express 服务器时,端点返回 404
- instagram - instagram 的 query_hash 算法是什么?
- python - 从像素中获取 RGB 值
- css - 如何在 React 上应用 Rem 单位进行响应式设计?