Question

我有四张足球运动员牌桌，一张是守门员，一张是守卫者，一张是中场，一张是攻击者。我希望用户能够改变播放器的位置，以便他从当前的桌子中消失，并在没有页面刷新的情况下出现在另一个播放器中。

我能想到的唯一方法是让每个玩家都列在所有四个牌桌中，但是让他隐藏了三个牌桌。然后，如果他改变了，我把他藏在当前的桌子里，并把他展示在另一张桌子里。

我知道如何实现这一点，但似乎有点沉重，我想知道是否有更优雅的解决方案。

Answer 1

您可以在纯JavaScript中使用appendChild()将节点从一个位置移动到另一个位置。该节点将自动从DOM中的旧位置移除。

引用Mozilla开发者网络documentation on appendChild：

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

这意味着节点不能同时位于文档的两个点中。因此，如果节点已经有父节点，则首先删除它，然后将其附加到新位置。

以下代码段演示了如何使用appendChild()在表之间移动行。单击move按钮将项目从一个表格移动到另一个表格。

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 2

您也可以使用table api来操纵表格，这里有一个示例：

将1,1,1元素移动到3,1,1

＆＃13;

<table>
  <tr>
    <td>1,1,1</td>
    <td>1,1,2</td>
    <td>1,1,3</td>
  </tr>
  <tr>
    <td>1,2,1</td>
    <td>1,2,2</td>
    <td>1,2,3</td>
  </tr>
  <tr>
    <td>1,3,1</td>
    <td>1,3,2</td>
    <td>1,3,3</td>
  </tr>
</table>
<br>
<table>
  <tr>
    <td>2,1,1</td>
    <td>2,1,2</td>
    <td>2,1,3</td>
  </tr>
  <tr>
    <td>2,2,1</td>
    <td>2,2,2</td>
    <td>2,2,3</td>
  </tr>
  <tr>
    <td>2,3,1</td>
    <td>2,3,2</td>
    <td>2,3,3</td>
  </tr>
</table>
<br>
<table>
  <tr>
    <td>3,1,1</td>
    <td>3,1,2</td>
    <td>3,1,3</td>
  </tr>
  <tr>
    <td>3,2,1</td>
    <td>3,2,2</td>
    <td>3,2,3</td>
  </tr>
  <tr>
    <td>3,3,1</td>
    <td>3,3,2</td>
    <td>3,3,3</td>
  </tr>
</table>

＆＃13;

featureA

＆＃13;

请注意，我使用innerHTML来访问数据，但您可以识别单元格中的任何元素，然后使用appendChild方法移动您需要的元素

使用JavaScript或jQuery在表之间移动项目

2 个答案: