Javascript 动态添加&删除列表框内容

点“添加参与人”按钮可以添加一行，每行后面都有一个删除按钮，可以删除所在行，“清空”则删除所有的行。这种效果在需要批量添加数据的时候非常有用，可以在客户端添加完一批数据，然后通过AJAX一次提交给服务器处理，下面是完整代码：

Body部份：

<div>

</tr>

</table>

</div>

<div>

</div>

JS代码部份<script language="javascript">// Example: obj = findObj("image1");

function findObj(theObj, theDoc){ var p, i, foundObj; if(!theDoc) theDoc = document; if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) { theDoc = parent.frames[theObj.substring(p+1)].document; theObj = theObj.substring(0,p); } if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i=0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj,theDoc.layers[i].document); if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj); return foundObj;}

//添加一个参与人填写行

function AddSignRow(){//读取最后一行的行号，存放在txtTRLastIndex文本框中

var txtTRLastIndex = findObj("txtTRLastIndex",document);

var rowID = parseInt(txtTRLastIndex.value);

var signFrame = findObj("SignFrame",document);

//添加行

var newTR = signFrame.insertRow(signFrame.rows.length);

newTR.id = "SignItem" + rowID;

//添加列:序号

var newNameTD=newTR.insertCell(0);

//添加列内容

newNameTD.innerHTML = newTR.rowIndex.toString();

//添加列:姓名

var newNameTD=newTR.insertCell(1);

//添加列内容

newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' size='12' />";

//添加列:电子邮箱

var newEmailTD=newTR.insertCell(2);

//添加列内容

newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' size='20' />";

//添加列:电话

var newTelTD=newTR.insertCell(3);

//添加列内容

newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' type='text' size='10' />";

//添加列:手机

var newMobileTD=newTR.insertCell(4);

//添加列内容

newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' size='12' />";

//添加列:公司名

var newCompanyTD=newTR.insertCell(5);

//添加列内容

newCompanyTD.innerHTML = "<input name='txtCompany" + rowID + "' id='txtCompany" + rowID + "' type='text' size='20' />";

//添加列:删除按钮

var newDeleteTD=newTR.insertCell(6);

//添加列内容

newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick="DeleteSignRow('SignItem" + rowID + "')">删除</a></div>";

//将行号推进下一行

txtTRLastIndex.value = (rowID + 1).toString() ;

}

//删除指定行

function DeleteSignRow(rowid){

var signFrame = findObj("SignFrame",document);

var signItem = findObj(rowid,document);

//获取将要删除的行的Index

var rowIndex = signItem.rowIndex;

//删除指定Index的行

signFrame.deleteRow(rowIndex);

//重新排列序号，如果没有序号，这一步省略

for(i=rowIndex;i<signFrame.rows.length;i++){

signFrame.rows[i].cells[0].innerHTML = i.toString();

}

}//清空列表

function ClearAllSign(){

if(confirm('确定要清空所有参与人吗？')){

var signFrame = findObj("SignFrame",document);

var rowscount = signFrame.rows.length;

//循环删除行,从最后一行往前删除

for(i=rowscount - 1;i > 0; i--){

signFrame.deleteRow(i);

}

//重置最后行号为1

var txtTRLastIndex = findObj("txtTRLastIndex",document);

txtTRLastIndex.value = "1";

//预添加一行

AddSignRow();

}

</script>

例一

<HTML>

<HEAD>

<TITLE> 测试Select</TITLE>

function addItem()

{

var txt=document.all("txt").value;

if(txt!="")

{

document.myForm.mySelect.length++;

document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text=txt;

document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value =document.myForm.mySelect.length;

}

else

{

alert("请填写内容");

}

</script>

</HEAD>

<BODY>

</SELECT></form>

内容:<input type="text" size=20 name="txt" id="txt"><br>

</BODY>

</HTML>

例二

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

<tr>

<td nowrap>入金期限日</td>

</tr>

<table>

</BODY>

</HTML>

<!--

function addrow() {

var row = activeTable.insertRow(activeTable.rows.length);

var col = row.insertCell(0);

var i = row.rowIndex;

col.innerHTML = '<input name="seituki1" size="2"><input name="seituki2" size="2">';

col = row.insertCell(1);

col.innerHTML = '<input name="keituki1" size="2"><input name="keituki2" size="2">';

col = row.insertCell(2);

col.innerHTML = '<input name="kenmei" size="18" value="">';

col = row.insertCell(3);

col.innerHTML = '<input name="kigen" size="17">';

col = row.insertCell(4);

col.innerHTML = '<input name="kingaku1" size="15" style="text-align: right">';

col = row.insertCell(5);

col.innerHTML = '<input name="zei1" size="13" style="text-align: right">';

col = row.insertCell(6);

col.innerHTML = '<input name="bikou1" value="' + i + ' " size="15">';

col = row.insertCell(7);

col.innerHTML = '<button onClick="delrow()">删除本行</button>';

}

function delrow () {

var srcName = document.getElementsByTagName("button");

var rowIndex = 0;

for ( i=0;i<srcName.length;i++){

if(srcName[i]==event.srcElement)

rowIndex=i;

}

activeTable.deleteRow(rowIndex + 1);

}

</script>

例三

<html>

<head>

<title>made by meixx</title>

<!--

function Add(ObjSource,ObjTarget){

for(var i=0;i<ObjSource.length;i++){

if(ObjSource.options[i].selected){

var opt=document.createElement("OPTION");

ObjTarget.add(opt);

opt.value=ObjSource.options[i].value;

opt.text=ObjSource.options[i].text;

ObjSource.options.removeChild(ObjSource.options[i--]);

opt.selected=true;

}

function AddAll(ObjSource,ObjTarget){

SelectAll(ObjSource);

Add(ObjSource,ObjTarget);

}

function SelectAll(ObjSource){

for(var i=0;i<ObjSource.length;i++){

ObjSource.options[i].selected=true;

}

function doSubmit(){

SelectAll(frmDisplay.dltTarget);

//frmDisplay.action="";//设置form 提交的action

alert(frmDisplay.action);

//frmDisplay.submit();//取消注释即可,提交上去的options

}

//->

</script>

</head>

<body>

<tr>

</select>

</td>

<p style="width:100%" align="center"><input type="button" value="->" onClick="Add(document.all.dltSource,frmDisplay.dltTarget)" title="添加"></p>

<p style="width:100%" align="center"><input type="button" value="=>" onClick="AddAll(document.all.dltSource,frmDisplay.dltTarget)" title="添加全部"></p>

</td>

</form>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</body>

</html>

例四

<tbody>

</tbody>

</table>

<br>

function del(){

tab.firstChild.removeChild(tab.rows[1]) //这个firstChild是指<tbody>，删除第二行

tab.rows[0].parentElement.removeChild(tab.rows[0]) //用另一方法删除第一行

}

</script>

例五

var n=0;

function add(){

n++;

t1.insertRow().insertCell().innerHTML = '<input type="radio" name="tt"><input name="test'+n+'"><button onclick="deleteRow(this)">delthis</button>';

//t1.insertRow().insertCell().innerHTML = '<input type="radio" name="tt"><input name="test'+t1.rows.length+'">';

}

function del(){

var c = document.getElementsByName('tt');

for(var i=0; i<c.length; i++)

if(c[i].checked)

t1.deleteRow(i);

}

function deleteRow(obj){

t1.deleteRow(obj.parentElement.parentElement.rowIndex);

}

function test(){

for(i=0;i<t1.rows.length;i++) alert(t1.rows[i].cells[0].innerHTML);

}

</SCRIPT>