Question

我在下面使用此代码将值从Random Fruits移至Green Fruits，但问题是我试图将其设置为以后将值移至Green Fruits我也可以将其移回Random Fruits Table，但我一直收到此错误消息"message": "Uncaught TypeError: Cannot read property 'indexOf' of undefined",我在做下面的代码有什么问题吗？非常感谢任何帮助，谢谢！

＆＃13;

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);

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

实际上您所要做的就是更新视图。您已正确完成项目转移。

您第一次进行转换时看不到错误，因为该项目在那里。您只能在第二次再次单击列表中的项目时看到错误。这是因为视图没有更新，项目已经消失了！

将表值移动到其他表并返回

1 个答案: