<html>
<head>
<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+'||'+rowsUnas[i].getAttribute("id");
}
}
<!--将选中的行移至未分配表-->
function moveToLeft()
{
//获取所有选中的ID值
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()
{
//获取所有选中的ID值
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 οnlοad="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></tr><th colspan="3">未分配</th></tr>
<tr><th>列1</th></tr>
<tr><th>列2</th></tr>
<tr><th>列3</th></tr>
<tr id="a" οnclick=changeBackground(this)>
<td>A</td><td>A</td><td>A</td>
</tr>
<tr id="b" οnclick="changeBackground(this)">
<td>B</td><td>B</td><td>B</td>
</tr>
</table>
</p>
</div>
</div>
<div id="buttonArea">
<p>
<p>
<input type="button" οnclick="moveToRight()" value=">>">
</p>
<p>
<input type="button" οnclick="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></tr>
<tr><th>列2</th></tr>
<tr><th>列3</th></tr>
<tr id="c" οnclick=changeBackground(this)>
<td>C</td><td>C</td><td>C</td>
</tr>
</table>
</p>
</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>