运用js动态增加删除表单元素-JavaSript-爱易网页

运用js动态增加删除表单元素

日期：2014-05-16　浏览次数：20432 次

使用js动态增加删除表单元素

javaeye 写道

这几天我一直在做数据采集工作，又一次发现我同事在展示我的数据的时候，使用了一些动态增加表单元素。我发现这很好玩，所以我也试着找了些资料和加上自己的整理，整出了以下一张网页。可以动态的增加和删除表单元素，但是有些不足，不能删除上次添加的，若删除后，在添加就不能在删除的位置上添加，还有我只在IE下测试通过。这个我不知道怎么做，主要是没有时间去研究，如果有哪位告诉可以留言留言。让俺也学习下。O(∩_∩)O (注：本程序在11月16日修改过。)

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

1 楼 wilsonxu 2008-11-14

1. 删除倒数第一个"input1".
2. 删除<br>.

2 楼 it577net 2009-10-21

你写出来了，我愣是没写对。。。
http://it577net.iteye.com/blog/499345

3 楼 it577net 2009-10-21

“不能删除上次添加的”
你指的跳跃式地添加吧，我那篇文章里的第二种的方法是用id值去remove

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

运用js动态增加删除表单元素

相关资料更多>

推荐阅读更多>