首頁 > 開發者 > JavaScript

JavaScript 實現動態增加、刪除表單域

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- JavaScript 實現動態增加、刪除表單域 -->
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var i=0
function 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>&nbsp;<INPUT TYPE=/"text/" NAME=/"tName/"></TD>' +
       '<TD align=/"right/">性別:</TD>' +
       '<TD>&nbsp;<INPUT TYPE=/"radio/" checked NAME=/"rSex/">先生&nbsp;&nbsp;<INPUT TYPE=/"radio/" NAME=/"rSex/">女士</TD>' +
       '</TR>' +
       '<TR>' +
       '<TD align=/"right/">職務:</TD>' +
       '<TD>&nbsp;<SELECT NAME=/"/">' +
       '<option value=/"其它/">&nbsp;其它&nbsp;</option>' +
       '<option value=/"經理/">&nbsp;經理&nbsp;</option>' +
       '</SELECT>' +
       '</TD>' +
       '<TD align=/"right/">郵件:</TD>' +
       '<TD>&nbsp;<INPUT TYPE=/"text/" NAME=/"tMail/"></TD>' +
       '</TR>' +
       '<TR>' +
       '<TD align=/"center/" colspan=/"4/"><input type=/"button/" value=/" 刪除 /" onclick=/"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>&nbsp;<INPUT TYPE="text" NAME="tCompany" size="60">
</TD>
</TR>
<TR>
<TD align="right">地址:</TD>
<TD>&nbsp;<INPUT TYPE="text" NAME="tAddress" size="60">
</TD>
</TR>
<TR>
<TD align="right">電話:</TD>
<TD>&nbsp;<INPUT TYPE="text" NAME="tTelephone" size="30">
</TD>
</TR>
<TR>
<TD align="right">傳真:</TD>
<TD>&nbsp;<INPUT TYPE="text" NAME="tFax" size="30">
</TD>
</TR>
</table>
    </td>
</tr>
<tr>
<td align="center">
<INPUT TYPE="button" value=" 添加 " onclick="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%">&nbsp;<INPUT TYPE="checkbox" NAME="">寄資料</TD>
</TR>
<TR>
<TD>&nbsp;<INPUT TYPE="checkbox" NAME="">去</TD>
</TR>
</TABLE>
</td>
</tr>
<tr>
<td align="center">
<INPUT TYPE="submit" value=" 提交 ">&nbsp;&nbsp;<INPUT TYPE="reset" value=" 清空 ">
</td>
</tr>
</table>
</BODY>
</HTML>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
formatmoney javascript javascript getdatetime unlink javascript hmac javascript javascript session javascript addslashes javascript bindto
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More