使用JavaScript或jQuery在表格之间移动项目 [英] Moving items between tables using JavaScript or jQuery

问题描述

我有四张足球队员的桌子，一个是守门员，一个是守门员，一个是中场，一个是攻击者。我希望用户能够更改玩家的位置，以便他能够从当前表中消失，并在不刷新页面的情况下出现在另一个表中。

我可以想到的唯一方法是让每个球员列在所有四张牌桌中，但是他们中的三个都隐藏了他。然后，如果他改变了，我将他藏在当前的表格中，并在另一张表格中显示他。

我知道如何实现这一点，但它看起来有点沉重，你可以使用 appendChild（）来解决这个问题。 $ c>在纯JavaScript中将节点从一个地方移动到另一个地方。该节点会自动从DOM中旧位置移除。

引用Mozilla开发者网络有关 appendChild 的文档：

如果给定的孩子是对文档中现有节点的引用， appendChild（）将其从当前位置移动到新位置（没有要求在将节点附加到其他节点之前从其父节点移除节点）。

这意味着一个节点不能进入两份文件同时进行。所以如果节点已经有一个父节点，它首先被删除，然后附加到新的位置。

以下片段演示了使用 appendChild（）在表格之间移动行。点击移动按钮将一个项目从一个表格移动到另一个表格。

window.onload = function（）{var data = {like：['vanilla'，'pistachio'，'squirrels'，'squash'，'mountains']，dislike：['chocolate'，'trucks'，'football' ，'硬糖'，'谷']}; var tables = {}; var moveMe = function（）{this.table = tables [this.table === tables.like？ '不喜欢'：'喜欢']; this.table.tbody.appendChild（this.tr）; }; Object.keys（data）.forEach（function（key）{var container = document.createElement（'div'），table = tables [key] = document.createElement（'table'），tbody = table.tbody = document。 createElement（'tbody'）; data [key] .forEach（function（item）{var tr = document.createElement（'tr'），td = document.createElement（'td'）; td.innerHTML = item; tr。 appendChild（td）; tbody.appendChild（tr）; var button = document.createElement（'button'）; button.innerHTML ='move'; button.onclick = moveMe; button.table = table; button.tr = tr; td.appendChild（button）;}）; table.appendChild（tbody）; var header = document.createElement（'h2'）; header.innerHTML = key; container.appendChild（header）; container.appendChild（table）; container .className ='container'; document.getElementById（'wrapper'）。appendChild（container）;}）;};

  * {box-model：border-box;} body {font-family：sans-serif;}＃wrapper {width：450px;}。宽度：200px; padding：10px;} h2 {margin：5px 0;颜色：＃666;} table {width：200px; border-collapse：collapse;} td {color：＃333;填充：10px; border：1px solid #bbb; position：relative;} td button {position：absolute;右：5px; top：5px; border：2px solid #ccc; border-radius：5px;背景：#fff; font-size：12px;} td button：hover {outline：none;边框颜色：＃888; cursor：pointer;}  

< div id =wrapper >< / div>

I have four tables of soccer players, one for goalkeepers, one for defenders, one for midfielders and one for attackers. I want the user to be able to change the position of a player so that he'll disappear from his current table and appear in another one without a page refresh.

The only method that I can think of is to have each player listed in all four tables but have him hidden for three of them. Then if he changes, I hide him in the current table and show him in another one.

I know how to achieve this, but it seems a bit heavy and I'm wondering if there's a more elegant solution.

解决方案

You can use appendChild() in pure JavaScript to move a node from one place to another. The node is automatically removed from its old position in the DOM.

To quote the Mozilla Developer Network documentation on appendChild:

If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).

This means that a node can't be in two points of the document simultaneously. So if the node already has a parent, it is first removed, then appended at the new position.

The following snippet demonstrates the use of appendChild() to move rows between tables. Click on the move buttons to move an item from one table to the other.

window.onload = function () {
  var data = {
    like: ['vanilla', 'pistachio', 'squirrels', 'squash', 'mountains'],
    dislike: ['chocolate', 'trucks', 'football', 'hard candy', 'valleys']
  };
  var tables = {};
  var moveMe = function () {
    this.table = tables[this.table === tables.like ? 'dislike' : 'like'];
    this.table.tbody.appendChild(this.tr);
  };
  Object.keys(data).forEach(function (key) {
    var container = document.createElement('div'),
        table = tables[key] = document.createElement('table'),
        tbody = table.tbody = document.createElement('tbody');
    data[key].forEach(function (item) {
      var tr = document.createElement('tr'),
          td = document.createElement('td');
      td.innerHTML = item;
      tr.appendChild(td);
      tbody.appendChild(tr);
      var button = document.createElement('button');
      button.innerHTML = 'move';
      button.onclick = moveMe;
      button.table = table;
      button.tr = tr;
      td.appendChild(button);
    });
    table.appendChild(tbody);
    var header = document.createElement('h2');
    header.innerHTML = key;
    container.appendChild(header);
    container.appendChild(table);
    container.className = 'container';
    document.getElementById('wrapper').appendChild(container);
  });
};

* {
  box-model: border-box;
}
body {
  font-family: sans-serif;
}
#wrapper {
  width: 450px;
}
.container {
  display: inline-block;
  width: 200px;
  padding: 10px;
}
h2 {
  margin: 5px 0;
  color: #666;
}
table {
  width: 200px;
  border-collapse: collapse;
}
td {
  color: #333;
  padding: 10px;
  border: 1px solid #bbb;
  position: relative;
}
td button {
  position: absolute;
  right: 5px;
  top: 5px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background: #fff;
  font-size: 12px;
}
td button:hover {
  outline: none;
  border-color: #888;
  cursor: pointer;
}

<div id="wrapper"></div>

这篇关于使用JavaScript或jQuery在表格之间移动项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！