用JS动态添加行(2)

今天做一项目，同一产品需要上传多个产品图片，并且产品图片的数目不固定，最初考虑通过服务器端实现，但后来发现通过服务器端实现控制起来并不灵活，每增加或删除一次表行都要提交服务器端并刷新页面，既耗费服务器资源又没有人性化的操作。遂决定通过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);
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);
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>

没有评论

用JS动态添加行(2)

文章TOP15