javascript - 恢复相同的行格式

Question

我在下面有这段代码，它允许我将值从Green Fruits Tableto移动，Suggested Fruits Table反之亦然，但问题是，在我将所有值从移动Suggested Fruits Table到Green Fruit Table所有值之后，所有值都作为单个列返回，我希望它遵循原始格式，即连续 3 个单元格。有什么简单的方法可以做到这一点吗？任何帮助将不胜感激。

var obj = {};
var obj2 = {};
var obj3 = {};

var key = "Red Fruits";
obj[key] = ['Apple', 'Cherry', 'Strawberry', 'Cranberry', 'Tomato'];
var myArray = [];
myArray.push(obj);

var key2 = "Green Fruits";
obj3[key2] = ['Watermelon', 'Durian', 'Avacado', 'Kiwi', 'HoneyDew'];
var myArray2 = [];
myArray2.push(obj3);

var key3 = "Random Fruits";
obj2[key3] = ['Pomegranate', 'Honeydew', 'Plum', 'Mango', 'Lime', 'Pineapple', 'Starfruit', 'Cantaloupe', 'Blueberry'];
var myArray3 = [];
myArray3.push(obj2);

function redraw(obj3) {

  var bodyString = '<tr>';
  var headString = '';
  $.each(obj[key], function(index) {
    if (index % 3 == 0 && index > 0) {
      bodyString += ('</tr><tr>');
    }
    bodyString += ('<td>' + obj[key][index] + '</td>');
  });
  bodyString += '</tr>';
  headString += ('<tr><th colspan="' + obj[key].length + '">' + 'Red Fruits' + '</th></tr>');
  $('.redclass tbody').html(bodyString);
  $('.redclass thead').html(headString);

  var bodyString2 = '<tr>';
  var headString2 = '';
  $.each(obj3[key2], function(index) {
    if (index % 3 == 0 && index > 0) {
      bodyString2 += ('</tr><tr>');
    }
    bodyString2 += ('<td class = "greenpilltable">' + obj3[key2][index] + '</td>');
  });
  bodyString2 += '</tr>';
  headString2 += ('<tr><th colspan="' + obj3[key2].length + '">' + 'Green Fruits' + '</th></tr>');
  $('.greenclass tbody').html(bodyString2);
  $('.greenclass thead').html(headString2);

  var bodyString3 = '<tr>';
  var headString3 = '';
  $.each(obj2[key3], function(index) {
    if (index % 6 == 0 && index > 0) {
      bodyString3 += ('</tr><tr>');
    }
    bodyString3 += ('<td>' + obj2[key3][index] + '</td>');
  });
  bodyString3 += '</tr>';
  headString3 += ('<tr><th colspan="' + obj2[key3].length + '">' + 'Suggested Fruits' + '</th></tr>');
  $('.randomclass tbody').html(bodyString3);
  $('.randomclass thead').html(headString3);
}

function redraw_after(obj3) {
  var bodyString3 = '<tr>';
  var headString3 = '';
  $.each(obj2[key3], function(index) {
    if (index % 5 == 0 && index > 0) {
      bodyString3 += ('</tr><tr>');
    }
    bodyString3 += ('<td>' + obj2[key3][index] + '</td>');
  });
  bodyString3 += '</tr>';
  headString3 += ('<tr><th colspan="' + obj2[key3].length + '">' + 'Suggested Fruits' + '</th></tr>');
  $('.randomclass tbody').html(bodyString3);
  $('.randomclass thead').html(headString3);
}



function listener(obj3) {
  $(document).ready(function() {
    $(document).on("click", "#randomid td", 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);
      obj3[key2].push(data);
      var element = $(this).detach();
      $('#greenid > tbody').append('<tr><td class="new-green-fruit">' + element.html() + '</td></tr>');
      redraw_after();
    });
  });

  $(document).ready(function() {
    $('body').on('click', 'td.new-green-fruit', function() {
      data2 = this.innerHTML;
      k2 = Object.keys(obj3).find(k => obj3[k].indexOf(data2) >= 0)
      index2 = obj3[k2].indexOf(data2);
      obj3[k2].splice(index2, 1);
      obj2[key3].push(data2);
      $(this).parent().detach();
      var element2 = $(this).detach();
      $('#randomid > tbody').append('<td>' + element2.html() + '</td>');
      redraw_after(obj3);
    });
  });
}
redraw(obj3);
listener(obj3);

.class {
  font-family: Open Sans;
}

.center {
  display: flex;
  justify-content: center
}

table.pillstable {
  float: left;
  width: 70% 
  table-row: fixed;
}

div {
  margin-bottom: 50px;
}

.new-green-fruit {
  padding: 8px 15px;
  text-align: center;
  font-size: 15px;
  border-radius: 25px;
  background-color: #2196f3;
  color: white;
  cursor: pointer;
}

table.pilltable td {
  padding: 8px 15px;
  text-align: center;
  font-size: 15px;
  border-radius: 25px;
  background-color: #2196f3;
  color: white;
  cursor: pointer;
}

table.pilltable th {
  font-weight: normal;
  border: 0;
  padding: 10px 0;
}

.greenpilltable {
  padding: 8px 15px;
  text-align: center;
  font-size: 15px;
  border-radius: 25px;
  background-color: #4caf50;
  color: white;
  cursor: pointer;
}

table.greenheader th {
  font-weight: normal;
  border: 0;
  padding: 10px 0;
}

table.redpilltable td {
  padding: 8px 15px;
  text-align: center;
  font-size: 15px;
  border-radius: 25px;
  background-color: #ff9800;
  color: white;
  cursor: pointer;
}

table.redpilltable th {
  font-weight: normal;
  border: 0;
  padding: 10px 0;
}

<!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 class="center">
      <table cellspacing="5" id="redid" cellspacing="5" class="redclass redpilltable class">
        <thead></thead>
        <tbody></tbody>
      </table>

      <table cellspacing="5" id="greenid" cellspacing="5" class="greenclass greenheader class">
        <thead></thead>
        <tbody></tbody>
      </table>
    </div>

    <div class="center">
      <table cellspacing="5" id="randomid" cellspacing="5" class="randomclass pilltable class">
        <thead></thead>
        <tbody></tbody>
      </table>
    </div>

  </body>

</html>

标签： javascriptjqueryhtmlcss