点“添加参与人”按钮可以添加一行，每行后面都有一个删除按钮，可以删除所在行，“清空”则删除所有的行。 这种效果在需要批量添加数据的时候非常有用，可以在客户端添加完一批数据，然后通过ajax一次提交给服务器处理，下面是完整代码：
body部份：
<div>
<table width="613" border="0" cellpadding="2" cellspacing="1" id="signframe">
<tr id="trheader">
<td width="27" bgcolor="#96e0e2">序号td>
<td width="64" bgcolor="#96e0e2">用户姓名td>
<td width="98" bgcolor="#96e0e2">电子邮箱td>
<td width="92" bgcolor="#96e0e2">固定电话td>
<td width="86" bgcolor="#96e0e2">移动手机td>
<td width="153" bgcolor="#96e0e2">公司名称td>
<td width="57" align="center" bgcolor="#96e0e2"> td>
tr>
table>
div>
<div>
<input type="button" name="submit" value="添加参与人" onclick="addsignrow()" />
<input type="button" name="submit2" value="清空" onclick="clearallsign()" />
<input name='txttrlastindex' type='hidden' id='txttrlastindex' value="1" />
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(p1)].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 = "" rowid "' id='txtname" rowid "' type='text' size='12' />";
//添加列:电子邮箱
var newemailtd=newtr.insertcell(2);
//添加列内容
newemailtd.innerhtml = "" rowid "' id='txtemail" rowid "' type='text' size='20' />";
//添加列:电话
var newteltd=newtr.insertcell(3);
//添加列内容
newteltd.innerhtml = "" rowid "' id='txttel" rowid "' type='text' size='10' />";
//添加列:手机
var newmobiletd=newtr.insertcell(4);
//添加列内容
newmobiletd.innerhtml = "" rowid "' id='txtmobile" rowid "' type='text' size='12' />";
//添加列:公司名
var newcompanytd=newtr.insertcell(5);
//添加列内容
newcompanytd.innerhtml = "" rowid "' id='txtcompany" rowid "' type='text' size='20' />";
//添加列:删除按钮
var newdeletetd=newtr.insertcell(6);
//添加列内容
newdeletetd.innerhtml = ""deletesignrow('signitem" rowid "')\">删除 ";
//将行号推进下一行
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>
posted on 2009-06-03 14:59
alpha 阅读(6405)
评论(2) 所属分类:
jquery javascript flex