JS 简单的实现移动选中元素_如何实现元素批量转移-优快云博客

本文链接：https://blog.youkuaiyun.com/github_38927899/article/details/77142875

本文介绍了如何使用JavaScript实现将选中的元素从一个盒子移动到另一个盒子的功能，支持单个或全部元素移动，并提供了实现该效果的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS 简单的实现移动选中元素

实现的功能：
有左右两个盒子，可以选中一个盒子的元素移动到另一边，也可以一次性移动全部元素。

实现效果如图：
这里写图片描述
实现代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function one_right(){
            var l_table=document.getElementsByTagName("table")[0].firstElementChild;
            var r_table=document.getElementsByTagName("table")[1].firstElementChild;
            var l_table2=l_table.children;
            var r_table2=r_table.children;
            for(var i=l_table2.length-1;i>=0;i--){
                var left=l_table2[i].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked;
                if(left){
                    r_table.appendChild(l_table2[i].cloneNode(true));
                    l_table.removeChild(l_table2[i]);
                }
            }
        }
        function one_left(){
            var l_table=document.getElementsByTagName("table")[0].firstElementChild;
            var r_table=document.getElementsByTagName("table")[1].firstElementChild;
            var l_table2=l_table.children;
            var r_table2=r_table.children;
            for(var i=r_table2.length-1;i>=0;i--){
                var left=r_table2[i].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked;
                if(left){
                    l_table.appendChild(r_table2[i].cloneNode(true));
                    r_table.removeChild(r_table2[i]);
                }
            }
        }
        function all_right(){
            var l_table=document.getElementsByTagName("table")[0].firstElementChild;
            var r_table=document.getElementsByTagName("table")[1].firstElementChild;
            var l_table2=l_table.children;
            for(var i=l_table2.length-1;i>=0;i--){
                r_table.appendChild(l_table2[i].cloneNode(true));
                l_table.removeChild(l_table2[i]);
            }
        }
        function all_left(){
            var l_table=document.getElementsByTagName("table")[0].firstElementChild;
            var r_table=document.getElementsByTagName("table")[1].firstElementChild;
            var r_table2=r_table.children;
            for(var i=r_table2.length-1;i>=0;i--){
                    l_table.appendChild(r_table2[i].cloneNode(true));
                    r_table.removeChild(r_table2[i]);
            }
        }
    </script>
</head>
<body align="center">
<div class="div">
    <table align="center">
        <tr>        <td><input type="checkbox">左左1</td>        </tr>
        <tr>        <td><input type="checkbox">左左2</td>        </tr>
        <tr>        <td><input type="checkbox">左左3</td>        </tr>
        <tr>        <td><input type="checkbox">左左4</td>        </tr>
        <tr>        <td><input type="checkbox">左左5</td>        </tr>
    </table>
</div>
<div style="float: left;margin-top: 80px;padding: 10px">
    <input type="button" value="--->" onclick="one_right()"><br><br>
    <input type="button" value="<---" onclick="one_left()"><br><br>
    <input type="button" value="->>" onclick="all_right()"><br><br>
    <input type="button" value="<<-" onclick="all_left()"><br><br>
</div>
<div class="div">
    <table align="center">
        <tr>        <td><input type="checkbox">右右1</td>        </tr>
        <tr>        <td><input type="checkbox">右右2</td>        </tr>
        <tr>        <td><input type="checkbox">右右3</td>        </tr>
    </table>
</div>
</body>
<style>
    .div{
        width: 200px;
        height: 400px;
        border: 2px slategray solid;
        float: left;
    }
</style>
</html>