获取相同数量的行

Question

我在下方有以下代码，允许我将值从Green Fruits Table移到Random Fruits Table，反之亦然，但问题是我将所有值从Green Fruits Table移回{ {1}}所有值都以单行形式返回，但我希望它返回值，就像它原来的一样。有什么简单的方法可以解决这个问题吗？

Random Fruit 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', 'Mango', 'Lime', 'Pineapple', 'Starfruit', 'Cantaloupe', 'Blueberry'];
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));
  });
  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 = '<tr>';
  var headString = '';
  $.each(obj2[key3], function(index) {
    if (index % 5 == 0 && index > 0) {
      bodyString += ('</tr><tr>');
    }
    bodyString += ('<td>' + obj2[key3][index] + '</td>');
  });
  bodyString += '</tr>';
  headString += ('<tr><th colspan="' + obj2[key3].length + '">' + 'Suggested Fruits' + '</th></tr>');
  $('.carsclass tbody').html(bodyString);
  $('.carsclass thead').html(headString);
}


function listener(obj) {
  $(document).ready(function() {
    $(document).on("click", "#carsid 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);
      obj[key2].push(data);
      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', 'td.new-green-fruit', function() {
      data2 = this.innerHTML;
      k2 = Object.keys(obj).find(k => obj[k].indexOf(data2) >= 0)
      index2 = obj[k2].indexOf(data2);
      obj[k2].splice(index2, 1);
      obj2[key3].push(data2);
      $(this).parent().detach();
      var element2 = $(this).detach();
      $('#carsid > tbody').append('<td>' + element2.html() + '</td>');
    });
  });
}
redraw(obj);
listener(obj);

.class {
  font-family: Open Sans;
}

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

table.skillsTable th {
  border-left: 1px solid #AAA5A4;
  border-right: 1px solid #AAA5A4;
  color: #0080ff;
  font-weight: normal;
  border-bottom: 1px solid #AAA5A4;
  padding-bottom: 5px;
}

table.skillsTable {
  float: left;
  border-collapse: collapse;
  width: 70%
}

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

table.skillsTable td {
  border-left: 1px solid #AAA5A4;
  border-right: 1px solid #AAA5A4;
  padding-top: 8px;
  padding-left: 11px;
  font-size: 15px;
}

div {
  margin-bottom: 50px;
}

.new-green-fruit {
  color: lime;
}

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

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

Answer 1

要解决此问题，我会在随机水果中添加一些COMPASS_POINTS = %w[N NO O SO S SW W NW] 属性，我稍后会使用这些属性来插入正确的data和row。在下面的代码中添加了一些注释以进行导航。

可能不是最好的实现，但这样的事情可以帮助你。 （见摘录）。

＆＃13;

＆＃13;

column

＆＃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', 'Mango', 'Lime', 'Pineapple', 'Starfruit', 'Cantaloupe', 'Blueberry']
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))
  })
  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 = '<tr>'
  var headString = ''
  $.each(obj2[key3], function (index) {
    if (index % 5 == 0 && index > 0) {
      bodyString += ('</tr><tr>')
    }
    // adding data row and data column attributes
    bodyString += ('<td data-row="' + parseInt(index / 5) + '" data-column="' + index % 5 + '">' + obj2[key3][index] + '</td>')
  })
  bodyString += '</tr>'
  headString += ('<tr><th colspan="' + obj2[key3].length + '">' + 'Suggested Fruits' + '</th></tr>')
  $('.carsclass tbody').html(bodyString)
  $('.carsclass thead').html(headString)
}

function listener (obj) {
  $(document).ready(function () {
    $(document).on('click', '#carsid 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)
      obj[key2].push(data)
      var element = $(this).clone() // cloning to keep the placeholder in random fruits
      $(this).replaceWith('<td></td>') // and removing it's content.
      element.addClass('new-green-fruit')
      // using outerHTML to get the whole attributes of the fruit including row and col
      $('#fruitsid > tbody').append('<tr><td></td>' + element[0].outerHTML + '</tr>')
    })
  })

  $(document).ready(function () {
    $('body').on('click', 'td.new-green-fruit', function () {
      data2 = this.innerHTML
      k2 = Object.keys(obj).find(k => obj[k].indexOf(data2) >= 0)
      index2 = obj[k2].indexOf(data2)
      obj[k2].splice(index2, 1)
      obj2[key3].push(data2)
      $(this).parent().detach()
      var element2 = $(this).detach()
      var row = element2.data('row')
      var col = element2.data('column')
      // inserting in right row and column gathered from above.
      $($($('#carsid > tbody tr')[row]).find('td')[col]).replaceWith(element2)
      return false;
    })
  })
}

redraw(obj)
listener(obj)

＆＃13;

.class {
  font-family: Open Sans;
}

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

table.skillsTable th {
  border-left: 1px solid #AAA5A4;
  border-right: 1px solid #AAA5A4;
  color: #0080ff;
  font-weight: normal;
  border-bottom: 1px solid #AAA5A4;
  padding-bottom: 5px;
}

table.skillsTable {
  float: left;
  border-collapse: collapse;
  width: 70%
}

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

table.skillsTable td {
  border-left: 1px solid #AAA5A4;
  border-right: 1px solid #AAA5A4;
  padding-top: 8px;
  padding-left: 11px;
  font-size: 15px;
}

div {
  margin-bottom: 50px;
}

.new-green-fruit {
  color: lime;
}

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

之所以发生这种情况，是因为您将元素推到行外，而不是保存它们的位置。解决方案：保存位置并插入tr

function getPosition(data) {
  return {
    row: Number(data.split(' ')[0]),
    column: Number(data.split(' ')[1])
  };
}

Array.from(document.getElementsByClassName('elem')).forEach(elem => {
  elem.addEventListener('click', e => {
    if(e.target.parentNode.classList.contains('tr')) {
      let position = getPosition(e.target.dataset.position);
      let row = document.querySelector('.tab').querySelectorAll('tr')[position.row];
      row.insertBefore(e.target, row.children[position.column]);
    } else {
      document.querySelector('.tr').appendChild(e.target);
    }
  });
});

.elems {
  border: 1px solid black;
}

.elem {
  background: rgb(0, 120, 255);
  padding: 10px 10px;
  border-radius: 10px;
}

<table class='elems'>
  <tr class='tr'>
  </tr>
</table>

<table class='tab'>
  <tr><td class='elem' data-position='0 0'>ELem1</td>
    <td class='elem' data-position='0 1'>Long ELem2</td>
    <td class='elem' data-position='0 2'>Longer ELem3</td></tr>
  <tr><td class='elem' data-position='1 0'>Even Longer ELem4</td>
    <td class='elem' data-position='1 1'>Short ELem5</td>
    <td class='elem' data-position='1 2'>Just ELem6</td></tr>
</table>

您也可以使用flexbox

Array.from(document.getElementsByClassName("elem")).forEach(elem => {
  elem.addEventListener('click', e => {
    document.querySelector('.flex-box').appendChild(e.target);
  });
});

.flex-box {
  display: flex;
  width: 500px;
  flex-wrap: wrap;
}

.elem {
  background: rgb(0, 120, 255);
  padding: 10px 10px;
  border-radius: 10px;
}

.flex-box .elem {
  flex: 1 0 content;
}

<div class='elems'>
  <div class='elem'>ELem1</div>
  <div class='elem'>Long ELem2</div>
  <div class='elem'>Longer ELem3</div>
  <div class='elem'>Even Longer ELem4</div>
  <div class='elem'>Short ELem5</div>
  <div class='elem'>Just ELem6</div>
</div>
<div class='flex-box'></div>

此解决方案需要更多代码，因为您必须将元素从table移动到div（可能会避免对表进行一些更改）。除此之外，使用flexbox时元素不会自动拉伸，因此当其中一个元素具有较长内容时，您不必使用元素来防止过度拉伸。 如果要保留订单，请使用order属性。

Answer 3

为此，我通过稍微修改redraw_after(obj)函数并将两个函数放在脚本中来创建一个新函数redraw(obj)。现在，只需在每个侦听器函数之后调用新的redraw_after(obj)函数即可获得所需的输出。

这里发生的是每次点击后，所有对象都会重新绘制到每个行样式的5列。这就是它工作的原因。虽然，每次在队列的最后添加新元素，但我认为实现是完美的。

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', 'Mango', 'Lime', 'Pineapple', 'Starfruit', 'Cantaloupe', 'Blueberry'];
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));
  });
  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 = '<tr>';
  var headString = '';
  $.each(obj2[key3], function(index) {
    if (index % 5 == 0 && index > 0) {
      bodyString += ('</tr><tr>');
    }
    bodyString += ('<td>' + obj2[key3][index] + '</td>');
  });
  bodyString += '</tr>';
  headString += ('<tr><th colspan="' + obj2[key3].length + '">' + 'Suggested Fruits' + '</th></tr>');
  $('.carsclass tbody').html(bodyString);
  $('.carsclass thead').html(headString);
}

function redraw_after(obj) {

  var bodyString = "";


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


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

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

}
redraw(obj);
listener(obj);

.class {
  font-family: Open Sans;
}

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

table.skillsTable th {
  border-left: 1px solid #AAA5A4;
  border-right: 1px solid #AAA5A4;
  color: #0080ff;
  font-weight: normal;
  border-bottom: 1px solid #AAA5A4;
  padding-bottom: 5px;
}

table.skillsTable {
  float: left;
  border-collapse: collapse;
  width: 70%
}

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

table.skillsTable td {
  border-left: 1px solid #AAA5A4;
  border-right: 1px solid #AAA5A4;
  padding-top: 8px;
  padding-left: 11px;
  font-size: 15px;
}

div {
  margin-bottom: 50px;
}

.new-green-fruit {
  color: lime;
}

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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 cellspacing="5" id="carsid" class="carsclass pilltable class">
    <thead></thead>
    <tbody></tbody>
  </table>
</div>