在主从表操作中，经常要动态给表格增加/删除一行,主从表所有数据填写完以后才一起提交。
下面我用javascript动态增加/删除表格行。代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态给表格增加/删除一行</title>
</head>
<script language=javascript>
allCount=1
function addline()
{
newRow=listtable.insertRow(listtable.rows.length);
newRow.ln=allCount;
newRow.id=allCount;
c1=newRow.insertCell(0);
c1.bgColor="#FFFFFF";
c1.innerHTML="<input size=10 name=sClass"+allCount+">";
c2=newRow.insertCell(1);
c2.bgColor="#FFFFFF";
c2.innerHTML="<input size=10 name=sMaterial"+allCount+">";
c3=newRow.insertCell(2);
c3.bgColor="#FFFFFF";
c3.innerHTML="<input size=10 name=sSpec"+allCount+">";
c4=newRow.insertCell(3);
c4.bgColor="#FFFFFF";
c4.innerHTML="<input size=10 name=sPrice"+allCount+">";
c5=newRow.insertCell(4);
c5.bgColor="#FFFFFF";
c5.innerHTML="<input size=10 name=sAmount"+allCount+">";
c6=newRow.insertCell(5);
c6.bgColor="#FFFFFF";
c6.innerHTML="<input size=10 name=sFactory"+allCount+">";
c7=newRow.insertCell(6);
c7.bgColor="#FFFFFF";
c7.innerHTML="<input size=10 name=sDeliveryPlace"+allCount+">";
c8=newRow.insertCell(7);
c8.bgColor="#FFFFFF";
c8.innerHTML="<input size=10 name=sNotes"+allCount+">";
c9=newRow.insertCell(8);
c9.bgColor="#FFFFFF";
c9.align="CENTER";
c9.innerHTML="<input type=checkbox value=t checked name=cPub"+allCount+">";
c10=newRow.insertCell(9);
c10.bgColor="#FFFFFF";
c10.align="CENTER";
c10.id="line"+allCount;
c10.innerHTML="<input type=button value=删除 onclick=delline(line"+allCount+")>";
c11=newRow.insertCell(10);
c11.bgColor="#FFFFFF";
c11.align="CENTER";
c11.innerHTML="<input type=button value=插入 onclick=insertline(line"+allCount+")>";
allCount++
}
function insertline(lineid)
{
for(i=0;i<listtable.rows.length;i++)
{
if(listtable.rows[i].cells[9].id==lineid.id)
{
newRow=listtable.insertRow(i);
newRow.ln=allCount;
newRow.id=allCount;
c1=newRow.insertCell(0);
c1.bgColor="#FFFFFF";
c1.innerHTML="<input size=10 name=sClass"+allCount+">";
c2=newRow.insertCell(1);
c2.bgColor="#FFFFFF";
c2.innerHTML="<input size=10 name=sMaterial"+allCount+">";
c3=newRow.insertCell(2);
c3.bgColor="#FFFFFF";
c3.innerHTML="<input size=10 name=sSpec"+allCount+">";
c4=newRow.insertCell(3);
c4.bgColor="#FFFFFF";
c4.innerHTML="<input size=10 name=sPrice"+allCount+">";
c5=newRow.insertCell(4);
c5.bgColor="#FFFFFF";
c5.innerHTML="<input size=10 name=sAmount"+allCount+">";
c6=newRow.insertCell(5);
c6.bgColor="#FFFFFF";
c6.innerHTML="<input size=10 name=sFactory"+allCount+">";
c7=newRow.insertCell(6);
c7.bgColor="#FFFFFF";
c7.innerHTML="<input size=10 name=sDeliveryPlace"+allCount+">";
c8=newRow.insertCell(7);
c8.bgColor="#FFFFFF";
c8.innerHTML="<input size=10 name=sNotes"+allCount+">";
c9=newRow.insertCell(8);
c9.bgColor="#FFFFFF";
c9.align="CENTER";
c9.innerHTML="<input type=checkbox value=t checked name=cPub"+allCount+">";
c10=newRow.insertCell(9);
c10.bgColor="#FFFFFF";
c10.align="CENTER";
c10.id="line"+allCount;
c10.innerHTML="<input type=button value=删除 onclick=delline(line"+allCount+")>";
c11=newRow.insertCell(10);
c11.bgColor="#FFFFFF";
c11.align="CENTER";
c11.innerHTML="<input type=button value=插入 onclick=insertline(line"+allCount+")>";
allCount++
return;
}
}
}
function delline(lineid)
{
for(i=0;i<listtable.rows.length;i++)
{
for(j=0;j<listtable.rows[i].cells.length;j++)
{
if(listtable.rows[i].cells[j].id==lineid.id)
{
listtable.deleteRow(i);
return;
}
}
}
}
</script>
<body>
<table width=700 height="20" border="0" align="center" cellpadding=0 cellspacing=0 id=listtable>
<tr align=center height=20>
<td bgcolor=#FFFFFF><b>品名</b></td>
<td bgcolor=#FFFFFF><b>材质</b></td>
<td bgcolor=#FFFFFF><b>规格</b></td>
<td bgcolor=#FFFFFF><b>价格</b></td>
<td bgcolor=#FFFFFF><b>数量</b></td>
<td bgcolor=#FFFFFF><b>产地</b></td>
<td bgcolor=#FFFFFF><b>交货地</b></td>
<td bgcolor=#FFFFFF><b>备注</b></td>
<td bgcolor=#FFFFFF><b>发布</b></td>
<td bgcolor=#FFFFFF><b>-</b></td>
<td bgcolor=#FFFFFF><b>-</b></td>
</tr>
</table>
<table width="700" height="25" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td align="center"><input type=button value=增加一行 onclick=addline()></td>
</tr>
</table>
</body>
</html>
实例演示
