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>