Question

我有以下代码，只要我点击单元格值，就会打印random fruits表的值。问题是我试图创建一个函数，允许我通过点击例如random fruits将kiwi表的值移动到红色水果表中，它将进入红色水果表，我希望能够将我移入red fruits表的值移回random fruits表。我尝试使用数组推送方法，但它只将值复制到另一个表而不是完全移动它。有没有任何简单的方法来做任何建议将不胜感激，谢谢！

＆＃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);

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);
}

＆＃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;
}

＆＃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="//#" />
</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>

＆＃13;

Answer 1

在代码之上工作，更改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);
               };
            }
        }
 }

找到相关的键并从该数组中删除该元素，然后将其推送到k2。完成后，它会重新绘制UI。

小提琴 - https://jsfiddle.net/wqzsn7ou/

将表行移动到另一个表

1 个答案: