Dom全選無選逆選
14466 ワード
<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>