javascript创建动态表单的方法
本文实例讲述了javascript创建动态表单的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metahttp-equiv="Content-Language"content="zh-CN"/>
<metaname="Keywords"content=""/>
<metaname="Description"content=""/>
<title></title>
<style>
#tab{
border:1pxsolid#aaa;
border-collapse:collapse;
width:80%;
}
#tabth{
border:1pxsolid#aaaaaa;
background:#ECE9D8;
border-collapse:collapse;
padding:5px;
text-align:left;
}
#tabtd{
border:1pxsolid#d8d8d8;
border-collapse:collapse;
padding:5px;
}
.txt{
border:1pxsolid#888;
background:#ECE9D8;
}
.checkBg{
border:1pxsolid#aaaaaa;
background:#ECE9D8;
}
.checkTxt{
border:1pxsolid#aaa;
background:##d8d8d8;
}
.button{
border:1pxsolid#888;margin:5px0px;
width:80px;background:#ECE9D8;height:22px;line-height:22px;
}
</style>
<scriptlanguage="javascript"type="text/javascript">
function$(id){returndocument.getElementById(id);}
function$F(name){returndocument.getElementsByTagName(name);}
functionadd(){
varotr=document.getElementById("tab").insertRow(-1);
varcheckTd=document.createElement("td");
checkTd.innerHTML='<inputtype="checkbox"class="check"onclick="ccolor()"name="checkItem">';
varotd1=document.createElement("td");
otd1.innerHTML='<inputtype="text"class="txt"name="infoName_txt"id="infoName_txt'+($('tab').rows.length-1)+'"maxlength="30"value=""/>';
varotd2=document.createElement("td");
otd2.innerHTML='<inputtype="text"class="txt"name="infoValue_txt"id="infoValue_txt'+($('tab').rows.length-1)+'"maxlength="30"value=""/>';
otr.appendChild(checkTd);
otr.appendChild(otd1);
otr.appendChild(otd2);
}
functionccolor()
{
varc1=document.getElementsByName('checkItem');
for(vari=0;i<c1.length;i++)
if(c1[i].checked)
{
c1[i].parentNode.parentNode.className="checkBg";
c1[i].parentNode.nextSibling.firstChild.className="checkTxt";
c1[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";
}
else{c1[i].parentNode.parentNode.className="";
c1[i].parentNode.nextSibling.firstChild.className="";
c1[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
}
functiondel(){
varc=document.getElementsByName('checkItem');
varidArray=newArray();
for(vari=0;i<c.length;i++)
if(c[i].checked)
idArray.push(i);
varrowIndex;
varnextDiff=0;
for(j=0;j<idArray.length;j++)
{
rowIndex=idArray[j]+1-nextDiff++;
document.getElementById("tab").deleteRow(rowIndex);
}
}
functionsave(){
varpostString=$("postString");
varcheckboxs=document.getElementsByName("checkItem");
varttab=document.getElementsByName("infoName_txt");
vartt2=document.getElementsByName("infoValue_txt");
varidArray=newArray();
for(i=0;i<checkboxs.length;i++)
{
idArray.push(ttab[i].value+"|"+tt2[i].value);
}
postString.value=idArray.join("-");
alert(postString.value);
}
functionalldell()
{
vardes=document.getElementsByName('checkItem');
for(vari=0;i<des.length;i++)
{
if(des[i].checked=document.getElementById('delall').checked){
des[i].parentNode.parentNode.className="checkBg";
des[i].parentNode.nextSibling.firstChild.className="checkTxt";
des[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";}
else{des[i].parentNode.parentNode.className="";
des[i].parentNode.nextSibling.firstChild.className="";
des[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
}
}
</script>
</head>
<body>
<inputname="addv_btn"id="addv_btn"type="button"class="button"onClick="add();"value="add"/>
<inputname="del_btn"id="del_btn"type="button"class="button"onClick="del();"value="del"/>
<inputname="save"id="save"type="button"class="button"onClick="save();"value="save"/><br>
<tableid="tab">
<tr>
<thwidth="5%"><inputtype="checkbox"id="delall"onclick="alldell()"></td>
<thwidth="40%">Name</td>
<thwidth="55%">value</td>
</tr>
</table>
<p>
<inputtype="text"name="postString"id="postString">
</p>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。