Dom 全选 全不选 反选


<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;ivar 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"> >> button>
            <button id="moveAllBtn"> >>> button>
            <button id="backBtn"> << button>
            <button id="backAllBtn"> <<< button>
        div>
        <div id="rightDiv" class="right-div">div>
        <div style="clear:both">div>
    div>



body>
html>

你可能感兴趣的:(web前端,dom,web前端)