Dom 全选全不选反选

最新推荐文章于 2023-04-03 21:59:36 发布

Soloensiz

最新推荐文章于 2023-04-03 21:59:36 发布

阅读量624

点赞数

分类专栏： web前端文章标签： dom web前端

本文链接：https://blog.csdn.net/Lu_1u/article/details/76099154

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title></title>
    <style type="text/css">
        .left-div{
            width: 185px;
            height: 300px;
            border: 1px solid lightgray;
            float:left;
        }
        .middle-div{
            width:60px;
            height:300px;
            float:left;;
            text-align: center;
        }
        .middle-div button{
            margin-top:30px;
        }
        .right-div{
            width:185px;
            height:300px;
            border:1px solid lightgray;
            float: left;
        }
        #moveDiv p{
            margin:2px;
            padding:0;
        }
        .selected{
            background-color: blue;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var leftDiv = document.getElementById("leftDiv");
            var rightDiv = document.getElementById("rightDiv");


            var moveDiv = document.getElementById("moveDiv");
            var pElements = moveDiv.getElementsByTagName("p");
            for(var i=0;i<pElements.length;i++){
                var pElement = pElements.item(i);
                pElement.onmouseover = function () {
                    this.style.backgroundColor="lightgray";
                }
                pElement.onmouseout = function () {
                    this.style.backgroundColor=null;
                }


                pElement.onclick = function () {
                    if(this.className=="selected"){
                        this.className=null;
                    }else{
                        this.className="selected";
                    }
                }


                pElement.ondblclick = function () {

                    if(this.parentNode==leftDiv){
                        rightDiv.appendChild(this);
                    }else{
                        leftDiv.appendChild(this);
                    }
                }
            }

            var moveBtn = document.getElementById("moveBtn");
            moveBtn.onclick = function () {
                var pElements = leftDiv.getElementsByTagName("p");
                for(var i=0; i < pElements.length; i++){
                    var pElement = pElements.item(i);
                    if(pElement.className == "selected"){
                        rightDiv.appendChild(pElement);
                        pElement.className = null;
                        i--;
                    }
                }
            }




            var backBtn = document.getElementById("backBtn");
            backBtn.onclick = function () {
                var pElements = rightDiv.getElementsByTagName("p");
                for(var i=0; i < pElements.length; i++){
                    var pElement = pElements.item(i);
                    if(pElement.className == "selected"){
                        leftDiv.appendChild(pElement);
                        pElement.className = null;
                        i--;
                    }
                }
            }




            var moveAllBtn = document.getElementById("moveAllBtn");
            moveAllBtn.onclick = function () {
                var pElements = leftDiv.getElementsByTagName("p");
                while(pElements.length>0){
                    var pElement = pElements.item(0);
                    rightDiv.appendChild(pElement);
                    pElement.className=null;
                }
            }




            var backAllBtn = document.getElementById("backAllBtn");
            backAllBtn.onclick = function () {
                var pElements = rightDiv.getElementsByTagName("p");
                while(pElements.length>0){
                    var pElement = pElements.item(0);
                    leftDiv.appendChild(pElement);
                    pElement.className=null;
                }
            }




        }



    </script>

</head>
<body>
    <div id="moveDiv">
        <div id="leftDiv"  class="left-div">
            <p>红红火火</p>
            <p>恍恍惚惚</p>
            <p>哼哼哈哈</p>
            <p>含含糊糊</p>
        </div>
        <div id="middleDiv" class="middle-div">
            <button id="moveBtn"> &gt;&gt; </button>
            <button id="moveAllBtn"> &gt;&gt;&gt; </button>
            <button id="backBtn"> &lt;&lt; </button>
            <button id="backAllBtn"> &lt;&lt;&lt; </button>
        </div>
        <div id="rightDiv" class="right-div"></div>
        <div style="clear:both"></div>
    </div>



</body>
</html>

Soloensiz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom 全选全不选反选

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title></
复制链接

扫一扫