javascript - 将表格行移动到另一个表格并将其取回

标签 javascript jquery html css

下面的代码允许我将值从 Random Fruits Table 移动到 Green Fruits Table 问题是我想尝试这样做在我移动该值之后，我希望能够通过单击该行的相同方式从 Green Fruits Table 中取回该值，但我不想要来自 的原始值>Green 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'];
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 + ": " + 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 listener(obj) {
  $(document).ready(function() {
    $("#fruityid td").click(function() {
      getval(this);
      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);
      redraw(obj);
      listener(obj);
    });
  });
}

function getval(cel) {
 // alert(cel.innerHTML);
}
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;
}
<!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>

最佳答案

您不需要每次都调用重绘来向表中添加一行。

你需要像下面那样做才能从绿色水果表中识别新添加的水果，

这是像您要求的那样工作的 fiddle jsFiddle 

 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() {
      getval(this);
      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>'); //since we need to add to green fruit
      // now, if you want 
    });
  });
}


$('body').on('click', '.new-green-fruit', function() {
   alert("clicked on new green fruit : " + $(this).html());
});


function getval(cel) {
 // alert(cel.innerHTML);
}
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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 id="fruityid" class="fruityclass skillsTable class">
        <thead></thead>
        <tbody></tbody>
      </table>
    </div>

我所做的是，将 td 从随机水果表中分离出来，并将其附加到带有“new-green-fruit”类的绿色水果表，这有助于区分新添加的 tds 与旧的 tds。

此外，我已经单独为 new-green-fruit tds 注册了一个点击事件，因此只有在点击这些新水果时才会收到警报

关于javascript - 将表格行移动到另一个表格并将其取回，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50828299/

上一篇：html - Bootstrap 在输入组 div 中包装内容

下一篇：javascript - 移动端单列布局，桌面端双列布局

相关文章：

css网格，布局问题

javascript - 如何使我的网站在移动设备上的 View 尺寸更小以适合移动设备屏幕

javascript - 使用 jquery 在点击事件中查找表单

javascript - HTML5/js sqlite数据库不进入交易功能

javascript - 一切正常，但无法在与 C++ 连接的应用程序中通过 ID 访问元素？

css - 在响应式设计中让 div 从右到下

html - Bootstrap 3 下拉菜单中心对齐不起作用

javascript - Framework7 : Default url to a different view is not working

jQuery DatePicker 错误？

javascript - 在第一段之后插入 div，但不在 block 引用中插入段落

©2024 IT工具网  联系我们