zoukankan      html  css  js  c++  java
  • JavaScript 实现动态增加、删除表单域

    <!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>

  • 相关阅读:
    【转】c#基础系列1---深入理解值类型和引用类型
    【转】Aspnet Core为什么支持跨平台
    [翻译svg教程]svg学习系列 开篇
    使用docker 解决一个小问题,你也可能用的到
    增加软链接
    漫长的表白
    被社会抽了一巴掌
    杂乱五章的2015年终总结
    [资源分享]yslow 与firebug 修复版本Firefox35【绿色版本下载】
    Web前端性能测试-性能测试知多少---深入分析前端站点的性能
  • 原文地址:https://www.cnblogs.com/Microshaoft/p/2485796.html
Copyright © 2011-2022 走看看