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

我有四张球员表，一张是守门员，一张是后卫，一张是中场，一张是进攻队员。我希望用户能够更改玩家的位置，这样他就可以从当前表中消失，并出现在另一个表中，而无需刷新页面

我能想到的唯一方法是把每个球员都列在所有四张桌子上，但把他藏起来，让他在其中三张桌子上。如果他改变了，我会把他藏在当前表中，然后在另一个表中给他看

---

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

您可以在纯JavaScript中使用

appendChild（）

将节点从一个位置移动到另一个位置。节点将自动从其在DOM中的旧位置移除

引用Mozilla开发者网络：

如果给定的子节点是对文档中现有节点的引用，

appendChild（）

将其从当前位置移动到新位置（在将其附加到其他节点之前，不需要从父节点中删除该节点）

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

下面的代码片段演示如何使用

appendChild（）

在表之间移动行。单击

move

按钮将项目从一个表移动到另一个表

window.onload=函数（）{
风险值数据={
比如：[‘香草’、‘开心果’、‘松鼠’、‘南瓜’、‘山’]，
不喜欢：[“巧克力”、“卡车”、“足球”、“硬糖”、“山谷”]
};
var表={}；
var moveMe=函数（）{
this.table=tables[this.table==tables.like.“不喜欢”：“喜欢”]；
this.table.tbody.appendChild（this.tr）；
};
Object.keys（数据）.forEach（函数（键）{
var container=document.createElement（'div'），
table=tables[key]=document.createElement（'table'），
tbody=table.tbody=document.createElement（'tbody'）；
数据[key].forEach（函数（项）{
var tr=document.createElement（'tr'），
td=document.createElement（'td'）；
td.innerHTML=项目；
tr.appendChild（td）；
t附肢儿童（tr）；
var button=document.createElement（'button'）；
button.innerHTML='move'；
button.onclick=moveMe；
button.table=表格；
button.tr=tr；
td.appendChild（按钮）；
});
表3.儿童（t身体）；
var header=document.createElement（'h2'）；
header.innerHTML=key；
container.appendChild（表头）；
container.appendChild（表）；
container.className='container'；
document.getElementById（'wrapper'）.appendChild（容器）；
});
};
*{
盒子型号：边框盒；
}
身体{
字体系列：无衬线；
}
#包装纸{
宽度：450px；
}
.集装箱{
显示：内联块；
宽度：200px；
填充：10px；
}
氢{
保证金：5px0；
颜色：#666；
}
桌子{
宽度：200px；
边界塌陷：塌陷；
}
运输署{
颜色：#333；
填充：10px；
边框：1px实心#bbb；
位置：相对位置；
}
td按钮{
位置：绝对位置；
右：5px；
顶部：5px；
边框：2个实心#ccc；
边界半径：5px；
背景：#fff；
字体大小：12px；
}
td按钮：悬停{
大纲：无；
边框颜色：#888；
光标：指针；
}
您也可以使用来操作表，下面是一个示例：

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


var tables=document.querySelectorAll（“表”）
var elementToMove=表[0]。行[0]。单元格[0]
var destination=表[2]。行[0]。单元格[0]
destination.innerHTML=elementToMove.innerHTML
elementToMove.innerHTML=”“

1,1,1
1,1,2
1,1,3
1,2,1
1,2,2
1,2,3
1,3,1
1,3,2
1,3,3


2,1,1
2,1,2
2,1,3
2,2,1
2,2,2
2,2,3
2,3,1
2,3,2
2,3,3


3,1,1
3,1,2
3,1,3
3,2,1
3,2,2
3,2,3
3,3,1
3,3,2
3,3,3
您可以简单地将行移动到另一个表中。detach（）是否可以在这里工作？这将允许您分离DOM元素，然后在必要时重新插入它。啊，谢谢你们，我会调查这些的。我的方法听起来太多了。是的……将行从一个地方移动到另一个地方并不罕见或困难。我在回答中添加了一个片段，演示如何使用
appendChild（）
。这回答了你的问题吗？