javascript - 将表值从其他表移动并返回
问题描述
我在下面有这段代码,可以将值从Random Fruits
to移动,Green Fruits
但问题是我正在尝试这样做,以便在我将值移动到之后,我Green Fruits
也可以将其移回,但我Random Fruits Table
一直收到此错误消息"message": "Uncaught TypeError: Cannot read property 'indexOf' of undefined",
下面的代码做错了什么?任何帮助将不胜感激谢谢!
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() {
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>');
});
});
$(document).ready(function() {
$('body').on('click', '.new-green-fruit', function() {
console.log("Fruit : " + (this.innerHTML));
data2 = this.innerHTML;
k2 = Object.keys(obj).find(j => obj[j].indexOf(data2) >= 0)
index2 = obj[k2].indexOf(data2);
obj[k2].splice(index2, 1);
obj2[key3].push(data2);
});
});
}
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;
}
.new-green-fruit {
color: lime;
}
<!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="//#" />
<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>
解决方案
实际上,您所要做的就是更新视图。您已正确完成项目转移。
第一次返回时您看不到错误,因为该项目在那里。再次单击列表中的项目时,您只会看到错误。这是因为视图没有更新,并且该项目已经消失了!
推荐阅读
- java - 重新排列字符串的字符
- asp.net-mvc - 如何在MVC的Highcharts中动态添加分组的_categories
- javascript - 使用 HERE API 3/3.1 移动可拖动标记时,如何重新计算路线?
- reactjs - Antd:如何更改 Antd Form.Item 标签文本颜色?
- swift - Swift:为函数类型专门化泛型类的方法
- javascript - 无法访问 api 对象属性 - 反应钩子
- c - 当我将整数复制到新的动态数组中时,为什么会得到奇怪的值?
- c# - 计时器结束前游戏对象未停用
- c++ - 带矩阵的赋值运算符 (=) 返回垃圾值
- flutter - 在 dart 中生成动态 graphql 查询的最佳方法是什么?