对列表框中增加、删除、修改数据？

<title>移动、交换SELECT内容</title>
<style type="text/css">

</style>
<script language="javascript" defer>
//添加事件
fromSel.attachEvent("ondblclick",new Function("MoveOptions(fromSel,toSel)"))
toSel.attachEvent("ondblclick",new Function("MoveOptions(toSel,fromSel)"))
LeftButton.attachEvent("onmouseup",new Function("MoveOptions(fromSel,toSel)"))
RightButton.attachEvent("onmouseup",new Function("MoveOptions(toSel,fromSel)"))
//移动函数
function MoveOptions(fromObj,toObj) {
for (var i=0;i<fromObj.length;i++) {
if (fromObj.options[i].selected&&i!=0) {
with(toObj)options[length] = new Option(fromObj.options[i].text,fromObj.options[i].value);
with(fromObj)options[i] = null,i--;
if (event.type=="dblclick") break;
}
}
}
//交换函数
function SwapOptions(obj,direction) {
var objIndex = obj.selectedIndex;
var swapIndex=direction=="up"?objIndex-1:objIndex+1;
if ((swapIndex==obj.length&&direction=="down")||(swapIndex==-1&&direction=="up")||obj.selectedIndex==0||swapIndex<=0) return false;
obj.options[objIndex].swapNode(obj.options[swapIndex]);
}
</script>
<body>
<span style="width:165px;">
<button onmouseup="SwapOptions(fromSel,'up')">5</button>
<button onmouseup="SwapOptions(fromSel,'down')">6</button>
<select id="fromSel" multiple size=10>
<option>---请选择要进入的网站---
<option>CSND.net
<option>MSND.com
<option>Blueidea.com
<option>51job.com
<option>Yahoo.com
<option>Pchome.net
<option>Sina.com.cn
</select>
<div align="center">
<button id="RightButton">7</button>
<button id="LeftButton">8</button>
</div>
<select id="toSel" multiple size=10>
<option>---请选择感兴趣的网站---
</select>
<div align="right">
<button onmouseup="SwapOptions(toSel,'up')">5</button>
<button onmouseup="SwapOptions(toSel,'down')">6</button>
</div>
</span>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<HTML>
<HEAD>
<TITLE>插入、更新、删除列表框</TITLE>
<STYLE TYPE="text/css">
td,body { font-family:"Arial";font-size:10px;}
select { width:220px;}
.input { border:1px solid gray;width:140px;height:15px;background-color: #E7E3DE;font-family:"Verdana";color:#525152;font-size:9px;}
.button { border: 0px;background-color: #E7E3DE;width:38;height:15px;font-size: 9px;font-family:"Arial";color:#525152;cloudchen:expression(hideFocus=true)}
.radio {vertical-align: middle;}
</STYLE>
<script language="javascript">
/*CSS*/
window.onload = cssInitialize;
function cssInitialize() {
var form1 = document.forms[0];
var elem;
for (var i=0;i<form1.elements.length;i++) {
with (form1.elements[i]) {
switch(type) {
case "text":className="input";break;
case "button":className="button";break;
case "reset":className="button";break;
case "radio":className="radio";break;
}
}
}
}
/*CSS*//*MAIN*/
function whatAction(formName,formElement) {
var elem = eval("document."+formName+".item('"+formElement+"')");
for (var i=0;i<elem.length;i++)
if(elem[i].checked) {
return (elem[i].act);
break;
}
}
function showHideSubRadio(v) {
event.srcElement.parentNode.parentNode.nextSibling.style.display=v;
}
function modifyTextValue() {
with(document.forms[0]) {
if(sel.selectedIndex>-1) {
text.value = sel.options[sel.selectedIndex].text;
item("value").value = sel.options[sel.selectedIndex].value;
}
}
}
function changeOption(obj,index,text,value) {
var e,action,p;
action = whatAction("forms[0]","action");
p = whatAction("forms[0]","position");
if(index<0&&action=="add") {
if(p=="before")
index=obj.length-1;
else
index=obj.length;
} else if(index>0&&action=="add") {
if(p=="after") index++
}
if((action=="add"||action=="update")&&!text) {alert("必须输入显示文字");return false;}
try {
switch(action) {
case "add":obj.add(new Option(text,value),index);break;
case "update":obj.options[index] = new Option(text,value);break;
case "del":obj.options[index] = null;break;
default:alert("请选择动作");
}
} catch(e) {
alert("请选择一个选项")
}
if(action=="add")document.forms[0].text.value="",document.forms[0].item("value").value="";
}
/*MAIN*/</script>
</HEAD>
<BODY>
<form>
<select name="sel" size="15" onchange="modifyTextValue()"></select>
<table border=0 cellpadding=2 cellspacing=0>
<tr>
  <td width=35>text:</td>
  <td width=400><input type="text" name="text"></td>
</tr>
<tr>
<td>value:</td>
<td><input type="text" name="value"></td>
</tr>
<tr>
<td colspan=2>
<input type="radio" name="action" act="add" onClick="showHideSubRadio('block')" id="act1"><label for="act1">add option</label>
<input type="radio" name="action" act="update" onClick="showHideSubRadio('none')" id="act2"><label for="act2">modify option</label>
<input type="radio" name="action" act="del" onClick="showHideSubRadio('none')" id="act3"><label for="act3">del option</label>
</td>
</tr>
<tr style="display:none;">
<td colspan=2>
<input type="radio" name="position" id="p1" act="before"><label for="p1">before</label>
<input type="radio" name="position" id="p2" act="after" checked><label for="p2">after</label>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="ok" onclick="changeOption(sel,sel.selectedIndex,text.value,item('value').value)">
<input type="reset" value="cancel">
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
<html>
<head>
<title>Table对象的方法</title>
<script language="JavaScript">
var intRowIndex = 0;
function insertRow(tbIndex){
   var objRow = myTable.insertRow(tbIndex);
   var objCel = objRow.insertCell(0);
   objCel.innerText = document.myForm.myCell1.value;
   var objCel = objRow.insertCell(1);
   objCel.innerText = document.myForm.myCell2.value;
   objRow.attachEvent("onclick", getIndex);
   objRow.style.background = "pink";
}function deleteRow(tbIndex){
   myTable.deleteRow(tbIndex);
}function getIndex(){
   intRowIndex = event.srcElement.parentElement.rowIndex;
   pos.innerText = intRowIndex;
}
</script>
</head>
<body onload="pos.innerText=intRowIndex;">
<h2>Table对象的方法</h2>
<hr>
当前位置 : <span id="pos"></span>
<table id="myTable" border=1>
<tr onclick="getIndex()">
   <td>HTML</td>
   <td>CSS</td>
</tr>
<tr onclick="getIndex()">
   <td>JavaScript</td>
   <td>VBScript</td>
</tr>
</table>
<form name="myForm">
第一栏 : <input type="text" name="myCell1" value="CGI"><br/>
第二栏 : <input type="text" name="myCell2" value="ASP"><br/>
<input type="button" onclick="insertRow(intRowIndex)" value="插入行">
<input type="button" onclick="deleteRow(intRowIndex)" value="删除行">
<input type="button" onclick="insertRow(myTable.rows.length);" value="添加行">
</form>
</body>
</html>