首页 > 代码库 > 简单增加/删除表单元素

简单增加/删除表单元素

2024-07-03 10:42:24   224人阅读

<html>   

    <head>   
        <title>动态添加表单元素</title>   
    </head>   
    <script language="javascript">      
       
    //以下代码是动态添加表单元素。   
       
    var elementCount = 0;    
     
    //动态增加表单元素。   
    function AddElement(mytype){      
        //得到需要被添加的html元素。   
        var TemO=document.getElementById("add");      
        //创建一个指定名称（名称指定了html的类型）html元素。   
        var newInput = document.createElement("input");       
           
        elementCount = elementCount + 1;      
           
        //指定input的类型。   
        newInput.type=mytype;       
           
        //动态生成id。   
        newInput.id="input"+(elementCount);      
              
        TemO.appendChild(newInput);      
              
        var newline= document.createElement("br");    
           
        newline.id = "br"+(elementCount);    
           
        TemO.appendChild(newline);      
    }      
       
    //动态删除表单元素。      
    function delElement(mytype){      
        var TemO=document.getElementById("add");      
           
        if (elementCount>0){      
            var newInput = document.getElementById("input"+elementCount);       
              
            TemO.removeChild(newInput);    
      
            var newline= document.getElementById("br"+(elementCount));    
               
            elementCount = elementCount - 1;     
               
            TemO.removeChild(newline);      
        }    
    }      
    </script>   
       
    <body>   
        <input name="" type="button" value="新建文本框"  
            onClick="AddElement(‘text‘)" />   
        <input name="" type="button" value="新建复选框"  
            onClick="AddElement(‘checkbox‘)" />   
        <input name="" type="button" value="新建单选框"  
            onClick="AddElement(‘radio‘)" />   
        <input name="" type="button" value="新建文件域"  
            onClick="AddElement(‘file‘)" />   
        <input name="" type="button" value="新建密码框"  
            onClick="AddElement(‘password‘)" />   
        <input name="" type="button" value="新建提交按钮"  
            onClick="AddElement(‘submit‘)" />   
        <input name="" type="button" value="新建恢复按钮"  
            onClick="AddElement(‘reset‘)" />   
        <input name="" type="button" value="删除恢复按钮"  
            onClick="delElement(‘reset‘)" />   
        <br>   
        <form action="" method="get" name="frm">   
            <div id="add">   
                <input type="text" name="textfield">   
                <br>   
            </div>   
        </form>   
    </body>   
</html>

来源：http://54laobaixing.blog.163.com/blog/static/57843681200962342559684/


联系
我们