JavaScript 实现动态增加、删除表单域

    技术2022-05-11  125

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><!-- JavaScript 实现动态增加、删除表单域 --><HTML><HEAD><TITLE> New Document </TITLE><SCRIPT LANGUAGE="JavaScript"><!--var i=0function Add(){ var temp = document.body.children.item(0).rows.item(3).cells.item(0).children.item(0).rows.item(0).cells.item(0).children.item(0).children.item(0) temp.insertRow(temp.rows.length); temp.rows.item(temp.rows.length -1).insertCell(0); var xx=temp.rows.length -1 ;//-1 var sHTML sHTML='<TABLE border=/"1/" style=/"border-collapse: collapse/" bordercolor=/"#111111/"width=/"100%/">' +       '<TR>' +       '<TD align=/"center/" colspan=/"4/">个人信息 (' + i++ +')</TR>' +       '<TR>' +       '<TD align=/"right/">姓名:</TD>' +       '<TD> <INPUT TYPE=/"text/" NAME=/"tName/"></TD>' +       '<TD align=/"right/">性别:</TD>' +       '<TD> <INPUT TYPE=/"radio/" checked NAME=/"rSex/">先生  <INPUT TYPE=/"radio/" NAME=/"rSex/">女士</TD>' +       '</TR>' +       '<TR>' +       '<TD align=/"right/">职务:</TD>' +       '<TD> <SELECT NAME=/"/">' +       '<option value=/"其它/"> 其它 </option>' +       '<option value=/"经理/"> 经理 </option>' +       '</SELECT>' +       '</TD>' +       '<TD align=/"right/">邮件:</TD>' +       '<TD> <INPUT TYPE=/"text/" NAME=/"tMail/"></TD>' +       '</TR>' +       '<TR>' +       '<TD align=/"center/" colspan=/"4/"><input type=/"button/" value=/" 删除 /" οnclick=/"Delete(this);/">'       '</TR>' +       '</TABLE>'; temp.rows.item(temp.rows.length-1).cells.item(0).innerHTML=sHTML; temp.rows.item(temp.rows.length-1).cells.item(0).children.item(0).rows.item(3).cells.item(0).children.item(0).text=xx;}function Delete(x){  var temp = document.body.children.item(0).rows.item(3).cells.item(0).children.item(0).rows.item(0).cells.item(0).children.item(0).children.item(0) temp.deleteRow(x.text.valueOf()) for (var j=0;j<temp.rows.length;j++) temp.rows.item(j).cells.item(0).children.item(0).rows.item(3).cells.item(0).children.item(0).text=j;}file://--></SCRIPT></HEAD><BODY><table border="1" style="border-collapse: collapse" bordercolor="#111111" width="100%"><tr>    <td width="100%" align="center">Register</td></tr><tr>    <td align="center"><TABLE border="1" width="80%" style="border-collapse: collapse" bordercolor="#111111"><TR><TD align="right" width="15%">公司:</TD><TD> <INPUT TYPE="text" NAME="tCompany" size="60"></TD></TR><TR><TD align="right">地址:</TD><TD> <INPUT TYPE="text" NAME="tAddress" size="60"></TD></TR><TR><TD align="right">电话:</TD><TD> <INPUT TYPE="text" NAME="tTelephone" size="30"></TD></TR><TR><TD align="right">传真:</TD><TD> <INPUT TYPE="text" NAME="tFax" size="30"></TD></TR></table>    </td></tr><tr><td align="center"><INPUT TYPE="button" value=" 添加 " οnclick="Add()"></td></tr><tr><td align="center"><TABLE align=center border=0 width="100%" height="100%"><TR>       <TD width="100%" height="300" align="center">           <DIV style=" OVERFLOW: auto;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; WIDTH: 80%; HEIGHT: 100%">                <TABLE width="100%">                </TABLE>         </DIV>    </TD></TR></TABLE></td></tr><tr><td align="center"><TABLE border="1" width="40%" style="border-collapse: collapse" bordercolor="#111111"><TR><TD width="10%"> <INPUT TYPE="checkbox" NAME="">寄资料</TD></TR><TR><TD> <INPUT TYPE="checkbox" NAME="">去</TD></TR></TABLE></td></tr><tr><td align="center"><INPUT TYPE="submit" value=" 提交 ">  <INPUT TYPE="reset" value=" 清空 "></td></tr></table></BODY></HTML>


    最新回复(0)