在前端开发中,我们经常需要将数据从一个表格移动到另一个表格。这篇文章将介绍如何使用JS实现这个功能,同时提供详细的代码示例。
1. HTML结构
我们先来看一下HTML结构。我们需要创建两个表格,每个表格都有一个tbody和若干个tr。其中表格A中的每个tr元素都有一个checkbox,表示该行是否被选中,而表格B没有。当用户选择了表格A中的某些行,并点击“移动”按钮时,被选择的行会被移动到表格B中。
------ ------------ ------- ---- ----------- ----------- ----------- ----------- ----- -------- ------- ---- ----------- ----------- ------------ ---------- --------------------- ----- ---- ----------- ----------- ------------ ---------- --------------------- ----- ---- ----------- ----------- ------------- ---------- --------------------- ----- -------- -------- ------- ------------------------ ------ ------------ ------- ---- ----------- ----------- ----------- ----- -------- ------- -------- --------
2. JS实现
接下来我们使用JS来实现数据的移动。首先,我们需要获取表格A中被选中的行,然后将它们添加到表格B的tbody中。
----- ------- - ----------------------------------- --------------------------------- -- -- - ----- ------ - ---------------------------------- ----- ---------- - ------------------------------- -------- -- ------- ----- ------------ - --------------------------------------------------------------------- ---------- -- ----------------------------- -- ------------- ------------------------ -- - ---------------------------- --- ---
但这个方法有一个问题:如果用户再次点击“移动”按钮,被选择的行会被从表格B中移回表格A中。为了解决这个问题,我们需要修改代码,将被移动的行从表格A中删除。
----- ------- - ----------------------------------- --------------------------------- -- -- - ----- ------ - ---------------------------------- ----- ---------- - ------------------------------- -------- -- ------- ----- ------------ - --------------------------------------------------------------------- ---------- -- - ----- --- - ---------------------------- -------------------------------- ------ ---- --- -- ------------- ------------------------ -- - ---------------------------- --- ---
现在,当用户点击“移动”按钮后,被选择的行会从表格A中移除,并添加到表格B中。再次点击“移动”按钮时,这些行不会被移回表格A中。
总结
在本文中,我们介绍了如何使用JS实现两个表格里数据来回转移的方法。通过使用querySelectorAll和appendChild方法,我们可以轻松地实现这个功能。同时,我们还解决了一个潜在的问题,避免了数据的重复移动。这个例子向前端开发者
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/3115