<html>
<head>
<title>js list table</title>
</head>
<script language="javascript">
<!--
var ListUtil = new Object();
//MOVE ALL
ListUtil.moveAll = function moveAll(oListboxFrom,oListboxTo){
var options = oListboxFrom.options;
for(var i = 0; i < options.length; i++){
oListboxTo.appendChild(options[i]); //???
i -= 1;
}
}
//MOVE sigle
ListUtil.moveMuti = function moveMuti(oListboxFrom,oListboxTo){
var options = oListboxFrom.options;
for(var i = 0; i < options.length; i++){
if(options[i].selected){
oListboxTo.appendChild(options[i]);
i -= 1;
}
}
}
//MOVE UP
ListUtil.shiftUp = function(oListbox) {
if(oListbox.selectedIndex > 0){
var oOption = oListbox.options[oListbox.selectedIndex];
var oPrevOption = oListbox.options[oListbox.selectedIndex-1];
oListbox.insertBefore(oOption,oPrevOption);
}
}
//MOVE DOWN
ListUtil.shiftDown = function(oListbox){
if(oListbox.selectedIndex < oListbox.options.length-1){
var oOption = oListbox.options[oListbox.selectedIndex];
var oNextOption = oListbox.options[oListbox.selectedIndex+1];
oListbox.insertBefore(oNextOption,oOption);
}
}
//-->
</script>
<body text="#000000" bgcolor="#ffffff" link="#0033cc">
<form method=post action="#">
<table>
<tr>
<td>
Unselected employee
<select name="oListboxFrom" id="oListboxFrom" size="10" multiple="true"
style="width:100px;height:250px;margin-left:20px;float:left">
<option value="1" selected>tim</option>
<option value="2">jojo</option>
<option value="3">simon</option>
<option value="4">ata</option>
<option value="5">jimy</option>
</select>
</td>
<td align="center">
<input type="button" value=" >>> "
onclick="ListUtil.moveAll(oListboxFrom, oListboxTo);" />
<br/>
<input type="button" value=" >> "
onclick="ListUtil.moveMuti(oListboxFrom, oListboxTo);" />
<br/>
<input type="button" value=" << "
onclick="ListUtil.moveMuti(oListboxTo, oListboxFrom);" />
<br/>
<input type="button" value=" <<< "
onclick="ListUtil.moveAll(oListboxTo, oListboxFrom);" />
<br/>
<input type="button" value="MovePrev "
onclick="ListUtil.shiftUp(oListboxFrom);" />
<br/>
<input type="button" value="MoveNext"
onclick="ListUtil.shiftDown(oListboxFrom);" />
</td>
<td>
Selected Employees
<select name="oListboxTo" id="oListboxTo" multiple="true" size="10"
style="width:100px;height:250px;margin-left:20px;float:left">
<option value="319094784">cindy</option>
<option value="320274432">nancy</option>
<option value="322109440">amy</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
效果：
posted on 2008-10-09 18:39
Blog of JoJo 閱讀(113)
評論(0) 編輯 收藏 所屬分類:
Linux 技術相關