练习案例_移动列表项
<!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 moveDiv = document.getElementById("moveDiv");
var leftDiv = document.getElementById("leftDiv");
var rightDiv = document.getElementById("rightDiv");
var pElements = moveDiv.getElementsByTagName("p");
for(var i=0;i<pElements.length;i++){
var pElement = pElements.item(i);
//1 鼠标经过列表项，背景色改变成浅灰色
pElement.onmouseover=function(){
this.style.backgroundColor="lightgray";
}
pElement.onmouseout=function(){
this.style.backgroundColor=null;
}
//2 鼠标单击列表项后，列表项变成选中状态（class=selected）,再次点击后，取消选中状态
pElement.onclick=function(){
if(this.className=="selected"){
this.className=null;
}else{
this.className="selected";
}
}
//3 双击列表项的时候，把列表项移动到另外一个div里面
pElement.ondblclick=function(){
if(this.parentNode==leftDiv){
rightDiv.appendChild(this);
}else{
leftDiv.appendChild(this);
}
}
}
//4 点击 >> 按钮，把左边div被选中的列表项移动到右边，同时取消被选中状态
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--;
}
}
}
//5 <<
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--;
}
}
}
//6 >>>
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>
