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

最新推荐文章于 2022-08-22 08:33:46 发布

iteye_3033

最新推荐文章于 2022-08-22 08:33:46 发布

阅读量891

点赞数

分类专栏： Web前端文章标签： IE HTML Blog 工作

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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


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

iteye_3033

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用js动态增加删除表单元素

[quote="javaeye"][size=small] 这几天我一直在做数据采集工作，又一次发现我同事在展示我的数据的时候，使用了一些动态增加表单元素。我发现这很好玩，所以我也试着找了些资料和加上自己的整理，整出了以下一张网页。可以动态的增加和删除表单元素，但是有些不足，不能删除上次添加的，若删除后，在添加就不能在删除的位置上添加，还有我只在IE下测试通过。这个我不知道怎么做，主要是没...
复制链接

扫一扫

专栏目录