📄 双向选择框示例 .html
字号:
<html>
<head>
<title>JavaScript Book--代码6-25</title>
<script language="JavaScript">
<!-- 页面载入时初始化所有未选择的数据 -->
function loadAllUnselected(){
var unassignedTable = document.getElementById("unassignedTable");
var rowsUnselected = unassignedTable.childNodes[0].childNodes;
document.getElementById("unselected").value = "";
for(var i=0;i<rowsUnselected.length;i++){
if (rowsUnselected[i].tagName == "TR" && rowsUnselected[i].getAttribute("id")!=''){
document.getElementById("unselected").value = document.getElementById("unselected").value + '||' + rowsUnselected[i].getAttribute("id");
}
}
var assignedTable = document.getElementById("assignedTable");
var rowsSelected = assignedTable.childNodes[0].childNodes;
for(var i=0;i<rowsSelected.length;i++){
if (rowsSelected[i].tagName == "TR" && rowsSelected[i].getAttribute("id")!=''){
document.getElementById("unselected").value = document.getElementById("unselected").value + '||' + rowsSelected[i].getAttribute("id");
}
}
}
<!-- 汇总所有已分配和未分配数据 -->
function countAllIds(){
var unassignedTable = document.getElementById("unassignedTable");
var rowsUnas = unassignedTable.childNodes[0].childNodes;
document.getElementById("unassignedids").value = '';
for(var i=0;i<rowsUnas.length;i++){
if (rowsUnas[i].tagName == "TR" && rowsUnas[i].getAttribute("id")!=''){
document.getElementById("unassignedids").value = document.getElementById("unassignedids").value + '||' + rowsUnas[i].getAttribute("id");
}
}
var assignedTable = document.getElementById("assignedTable");
var rowsas = assignedTable.childNodes[0].childNodes;
document.getElementById("assignedids").value = '';
for(var i=0;i<rowsas.length;i++){
if (rowsas[i].tagName == "TR" && rowsas[i].getAttribute("id")!='')
document.getElementById("assignedids").value = document.getElementById("assignedids").value + '||' + rowsas[i].getAttribute("id");
}
}
<!-- 将选中的行移至未分配表 -->
function moveToLeft(){
//get all selected ids
var ids = document.getElementById("selected").value;
var idArray = ids.split('||');
for(var i=0;i<idArray.length;i++){
if(idArray[i]!=''){
var moveObj = document.getElementById(idArray[i]);
add(moveObj, "unassignedTable");
}
}
countAllIds();
}
<!-- 将选中的行移至已分配表 -->
function moveToRight(){
//get all selected ids
var ids = document.getElementById("selected").value;
var idArray = ids.split('||');
for(var i=0;i<idArray.length;i++){
if(idArray[i]!=''){
var moveObj = document.getElementById(idArray[i]);
add(moveObj,"assignedTable");
}
}
countAllIds();
}
<!-- 在指定表格中添加对应的行 -->
function add(rowObj, tableObj){
var table = document.getElementById(tableObj);
var newRow = table.insertRow(table.rows.length);
newRow.replaceNode(rowObj);
}
<!-- 删除已选择的行 -->
function removeRow(obj)
{
var clickedRow = obj;
while(clickedRow.tagName != "TR")
{
clickedRow = clickedRow.parentNode;
}
clickedRow.parentNode.removeChild(clickedRow);
}
<!-- 当鼠标点击时切换背景色与设置值-->
function changeBackground(obj){
if (obj.style.background=="silver"){
obj.style.background="#ffffff";
document.getElementById("unselected").value = document.getElementById("unselected").value+ '||' + obj.getAttribute("id");
document.getElementById("selected").value = document.getElementById("selected").value.replace('||'+obj.getAttribute("id"),'');
} else {
if(document.getElementById("selected").value.indexOf(obj.getAttribute("id"))<0){
document.getElementById("selected").value = document.getElementById("selected").value+ '||' + obj.getAttribute("id");
document.getElementById("unselected").value = document.getElementById("unselected").value.replace('||'+obj.getAttribute("id"),'');
}
obj.style.background="silver";
}
}
</script>
<style> body { text-align: center;}p {text-align: center;}#wrapper { width: 800px; margin: 0 auto; text-align: left; position: relative;}#buttonArea { width: 100px; float: left;}#leftPanel { width: 350px; float: left;}#rightPanel { width: 350px; float: left;}#footer { clear: both;}
</style>
</head>
<body onload="loadAllUnselected();countAllIds();">
<div id="wrapper">
<div>
<p>双向选择框示例
</p>
</div>
<div id="leftPanel">
<p>
<table id="unassignedTable" width="350" border="1" style="border-collapse:collapse;" bordercolor="#111111" cellpadding="0" cellspacing="0">
<tr>
<th colspan="3">未分配
</th>
</tr>
<tr>
<th>列1
</th>
<th>列2
</th>
<th>列3
</th>
</tr>
<tr id="a" onclick=changeBackground(this)> <td>A</td> <td>A</td> <td>A</td>
</tr>
<tr id="b" onclick=changeBackground(this)> <td>B</td> <td>B</td> <td>B</td>
</tr>
</table>
</p>
</div>
<div id="buttonArea">
<p>
<p>
<input type="button" onclick="moveToRight()" value=">>">
</p>
<p>
<input type="button" onclick="moveToLeft()" value="<<">
</p>
</p>
</div>
<div id="rightPanel">
<p>
<table id="assignedTable" width="350" border="1" style="border-collapse:collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
<tr>
<th colspan="3">已分配
</th>
</tr>
<tr>
<th>列1
</th>
<th>列2
</th>
<th>列3
</th>
</tr>
<tr id="c" onclick=changeBackground(this)> <td>C</td> <td>C</td> <td>C</td>
</tr>
</table>
</p>
</div>
</div>
<p>未选择：
<input id="unselected" type=text value=""> 已选择:
<input id="selected" type=text value="">
</p>
<p>未分配：
<input id="unassignedids" type=text value=""> 已分配:
<input id="assignedids" type=text value="">
</p>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -