动态生成HTML表单 - Alpha - BlogJava
来源：百度文库 编辑：神马文学网 时间：2024/05/10 06:58:26
动态生成HTML表单
前段时间在做设票系统，瞎搞一会，用JavaScript搞了一些有趣的东西，因为投票的条数不定，一个题目有不定条选项，要实现一次把投票题目与不定数目选项的投票项目一次性添加进数据库，因些就想了用JavaScript写了一个动态生成的HTML的“文体框”。然后用数组把所有值写入数据库。现在就把它做成一个简单的演示例子放在这里吧：
动态生成文体框演示 title><br><mip-img s='max-width:300px;' id="img3" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /><br><mip-img s='max-width:300px;' id="img4" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /><br><mip-img s='max-width:300px;' id="img5" src="http://image.360doc.cn/DownloadImg/10754/331254_6.gif" /><mip-img s='max-width:300px;' id="img6" src="http://image.360doc.cn/DownloadImg/10754/331254_7.gif" /><script language="javascript"><mip-img s='max-width:300px;' id="img7" src="http://image.360doc.cn/DownloadImg/10754/331254_8.gif" /><br><mip-img s='max-width:300px;' id="img8" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /><br><mip-img s='max-width:300px;' id="img9" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> function createitem()<br><mip-img s='max-width:300px;' id="img10" src="http://image.360doc.cn/DownloadImg/10754/331254_11.gif" /><mip-img s='max-width:300px;' id="img11" src="http://image.360doc.cn/DownloadImg/10754/331254_12.gif" /> <mip-img s='max-width:300px;' id="img12" src="http://image.360doc.cn/DownloadImg/10754/331254_8.gif" />{<br><mip-img s='max-width:300px;' id="img13" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> var m=document.form1;<br><mip-img s='max-width:300px;' id="img14" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> var val=m.max.value;<br><mip-img s='max-width:300px;' id="img15" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> for (i=0;i<val;i++)<br><mip-img s='max-width:300px;' id="img16" src="http://image.360doc.cn/DownloadImg/10754/331254_11.gif" /><mip-img s='max-width:300px;' id="img17" src="http://image.360doc.cn/DownloadImg/10754/331254_12.gif" /> <mip-img s='max-width:300px;' id="img18" src="http://image.360doc.cn/DownloadImg/10754/331254_8.gif" />{<br><mip-img s='max-width:300px;' id="img19" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> r=tab.insertRow()<br><mip-img s='max-width:300px;' id="img20" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /><br><mip-img s='max-width:300px;' id="img21" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> c=r.insertCell(‘nowrap align:Left‘)<br><mip-img s='max-width:300px;' id="img22" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> c.innerHTML="复选单选";<br><mip-img s='max-width:300px;' id="img23" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /><br><mip-img s='max-width:300px;' id="img24" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> c=r.insertCell()<br><mip-img s='max-width:300px;' id="img25" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> c.innerHTML="·";<br><mip-img s='max-width:300px;' id="img26" src="http://image.360doc.cn/DownloadImg/10754/331254_27.gif" /> }<br><mip-img s='max-width:300px;' id="img27" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> m.max.value="";<br><mip-img s='max-width:300px;' id="img28" src="http://image.360doc.cn/DownloadImg/10754/331254_27.gif" /> }<br><mip-img s='max-width:300px;' id="img29" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /><br><mip-img s='max-width:300px;' id="img30" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> function resetDate()<br><mip-img s='max-width:300px;' id="img31" src="http://image.360doc.cn/DownloadImg/10754/331254_11.gif" /><mip-img s='max-width:300px;' id="img32" src="http://image.360doc.cn/DownloadImg/10754/331254_12.gif" /> <mip-img s='max-width:300px;' id="img33" src="http://image.360doc.cn/DownloadImg/10754/331254_8.gif" />{<br><mip-img s='max-width:300px;' id="img34" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> var m=document.form1;<br><mip-img s='max-width:300px;' id="img35" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> m.action="butt.html";<br><mip-img s='max-width:300px;' id="img36" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> m.submit();<br><mip-img s='max-width:300px;' id="img37" src="http://image.360doc.cn/DownloadImg/10754/331254_27.gif" /> }<br><mip-img s='max-width:300px;' id="img38" src="http://image.360doc.cn/DownloadImg/10754/331254_39.gif" /><br><mip-img s='max-width:300px;' id="img39" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" />script><br><mip-img s='max-width:300px;' id="img40" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" />head><br><mip-img s='max-width:300px;' id="img41" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /><br><mip-img s='max-width:300px;' id="img42" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /><body><br><mip-img s='max-width:300px;' id="img43" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /><form name="form1" method=post action=""><br><mip-img s='max-width:300px;' id="img44" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /><table name="tab" id="tab"><br><mip-img s='max-width:300px;' id="img45" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <tr><br><mip-img s='max-width:300px;' id="img46" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <td colspan="2"> <div align="center">·动态生成文体框演示·div>td><br><mip-img s='max-width:300px;' id="img47" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> tr><br><mip-img s='max-width:300px;' id="img48" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /><br><mip-img s='max-width:300px;' id="img49" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <tr><br><mip-img s='max-width:300px;' id="img50" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <td colspan="2"> 请输入您要添加的行数：<br><mip-img s='max-width:300px;' id="img51" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <input type="text" name="max" size="5" value=""><br><mip-img s='max-width:300px;' id="img52" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <input type="button" name="add" value="添加" onclick="createitem()"><br><mip-img s='max-width:300px;' id="img53" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <input type="button" name="reset" value="重置" onclick="resetDate()"><br><mip-img s='max-width:300px;' id="img54" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> td><br><mip-img s='max-width:300px;' id="img55" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> tr><br><mip-img s='max-width:300px;' id="img56" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" />table><br><mip-img s='max-width:300px;' id="img57" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" />form><br><mip-img s='max-width:300px;' id="img58" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" />body><br><mip-img s='max-width:300px;' id="img59" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /><br><mip-img s='max-width:300px;' id="img60" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" />html><br><mip-img s='max-width:300px;' id="img61" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /><br>后来又做了一些其它的尝试演示，下面这个程序是增加了删除HTML表单的例子：<br><mip-img s='max-width:300px;' id="img62" src="http://image.360doc.cn/DownloadImg/10754/331254_6.gif" /><mip-img s='max-width:300px;' id="img63" src="http://image.360doc.cn/DownloadImg/10754/331254_7.gif" /><script language="javascript"><mip-img s='max-width:300px;' id="img64" src="http://image.360doc.cn/DownloadImg/10754/331254_8.gif" /><br><mip-img s='max-width:300px;' id="img65" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> var curRow=null;<br><mip-img s='max-width:300px;' id="img66" src="http://image.360doc.cn/DownloadImg/10754/331254_11.gif" /><mip-img s='max-width:300px;' id="img67" src="http://image.360doc.cn/DownloadImg/10754/331254_12.gif" /> function selectRow(tr1)<mip-img s='max-width:300px;' id="img68" src="http://image.360doc.cn/DownloadImg/10754/331254_8.gif" />{<br><mip-img s='max-width:300px;' id="img69" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> if(curRow)<br><mip-img s='max-width:300px;' id="img70" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> curRow.bgColor="#FFFFFF";<br><mip-img s='max-width:300px;' id="img71" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> tr1.bgColor="e7e7e7";<br><mip-img s='max-width:300px;' id="img72" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> curRow=tr1;<br><mip-img s='max-width:300px;' id="img73" src="http://image.360doc.cn/DownloadImg/10754/331254_27.gif" /> }<br><mip-img s='max-width:300px;' id="img74" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /><br><mip-img s='max-width:300px;' id="img75" src="http://image.360doc.cn/DownloadImg/10754/331254_11.gif" /><mip-img s='max-width:300px;' id="img76" src="http://image.360doc.cn/DownloadImg/10754/331254_12.gif" /> function addRow(src)<mip-img s='max-width:300px;' id="img77" src="http://image.360doc.cn/DownloadImg/10754/331254_8.gif" />{<br><mip-img s='max-width:300px;' id="img78" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> var newrow = src.insertRow(src.rows.length-1);<br><mip-img s='max-width:300px;' id="img79" src="http://image.360doc.cn/DownloadImg/10754/331254_11.gif" /><mip-img s='max-width:300px;' id="img80" src="http://image.360doc.cn/DownloadImg/10754/331254_12.gif" /> newrow.attachEvent("onclick",function()<mip-img s='max-width:300px;' id="img81" src="http://image.360doc.cn/DownloadImg/10754/331254_8.gif" />{selectRow(newrow);});<br><mip-img s='max-width:300px;' id="img82" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> newrow.height=20;<br><mip-img s='max-width:300px;' id="img83" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> var i=5;<br><mip-img s='max-width:300px;' id="img84" src="http://image.360doc.cn/DownloadImg/10754/331254_11.gif" /><mip-img s='max-width:300px;' id="img85" src="http://image.360doc.cn/DownloadImg/10754/331254_12.gif" /> while(i--)<mip-img s='max-width:300px;' id="img86" src="http://image.360doc.cn/DownloadImg/10754/331254_8.gif" />{<br><mip-img s='max-width:300px;' id="img87" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> var newcell = newrow.insertCell();<br><mip-img s='max-width:300px;' id="img88" src="http://image.360doc.cn/DownloadImg/10754/331254_11.gif" /><mip-img s='max-width:300px;' id="img89" src="http://image.360doc.cn/DownloadImg/10754/331254_12.gif" /> switch(i)<mip-img s='max-width:300px;' id="img90" src="http://image.360doc.cn/DownloadImg/10754/331254_8.gif" />{<br><mip-img s='max-width:300px;' id="img91" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> case 0: newcell.innerHTML= ‘<input type="button" onClick="javascript:delRow(this.parentElement.parentElement)" value="删除此行">‘;break;<br><mip-img s='max-width:300px;' id="img92" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> default: newcell.innerHTML=‘ ‘;break;<br><mip-img s='max-width:300px;' id="img93" src="http://image.360doc.cn/DownloadImg/10754/331254_27.gif" /> }<br><mip-img s='max-width:300px;' id="img94" src="http://image.360doc.cn/DownloadImg/10754/331254_27.gif" /> }<br><mip-img s='max-width:300px;' id="img95" src="http://image.360doc.cn/DownloadImg/10754/331254_27.gif" /> }<br><mip-img s='max-width:300px;' id="img96" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /><br><mip-img s='max-width:300px;' id="img97" src="http://image.360doc.cn/DownloadImg/10754/331254_11.gif" /><mip-img s='max-width:300px;' id="img98" src="http://image.360doc.cn/DownloadImg/10754/331254_12.gif" /> function delRow(src)<mip-img s='max-width:300px;' id="img99" src="http://image.360doc.cn/DownloadImg/10754/331254_8.gif" />{<br><mip-img s='max-width:300px;' id="img100" src="http://image.360doc.cn/DownloadImg/10754/331254_9.gif" /> src.parentElement.deleteRow(src.rowIndex);<br><mip-img s='max-width:300px;' id="img101" src="http://image.360doc.cn/DownloadImg/10754/331254_39.gif" /> }<br><mip-img s='max-width:300px;' id="img102" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" />script><br><mip-img s='max-width:300px;' id="img103" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /><br><mip-img s='max-width:300px;' id="img104" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /><table id="tabe" width="100%" border="1" ><br><mip-img s='max-width:300px;' id="img105" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <tr><br><mip-img s='max-width:300px;' id="img106" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <th width="20%">编号th><br><mip-img s='max-width:300px;' id="img107" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <th width="20%">姓名th><br><mip-img s='max-width:300px;' id="img108" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <th width="20%">性别th><br><mip-img s='max-width:300px;' id="img109" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <th width="20%">年龄th><br><mip-img s='max-width:300px;' id="img110" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <th width="20%">民族th><br><mip-img s='max-width:300px;' id="img111" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> tr><br><mip-img s='max-width:300px;' id="img112" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /><br><mip-img s='max-width:300px;' id="img113" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <tr id="lastRow" onClick="addRow(this.parentElement)"><br><mip-img s='max-width:300px;' id="img114" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <td> 1td><br><mip-img s='max-width:300px;' id="img115" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <td> 2td><br><mip-img s='max-width:300px;' id="img116" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <td> 3td><br><mip-img s='max-width:300px;' id="img117" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <td> 4td><br><mip-img s='max-width:300px;' id="img118" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> <td> 5td><br><mip-img s='max-width:300px;' id="img119" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /> tr><br><mip-img s='max-width:300px;' id="img120" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" /><br><mip-img s='max-width:300px;' id="img121" src="http://image.360doc.cn/DownloadImg/10754/331254_1.gif" />table></div>
<div class="zuoye-list-a">
<a href="/article/
前段时间在做设票系统，瞎搞一会，用JavaScript搞了一些有趣的东西，因为投票的条数不定，一个题目有不定条选项，要实现一次把投票题目与不定数目选项的投票项目一次性添加进数据库，因些就想了用JavaScript写了一个动态生成的HTML的“文体框”。然后用数组把所有值写入数据库。现在就把它做成一个简单的演示例子放在这里吧：