教程集 > 脚本编程 > javascript > 正文 js动态添加、删除文本框的例子

js动态添加、删除文本框的例子

发布时间：2015-02-15 编辑：jiaochengji.com

本文介绍下，一个使用javascript代码动态添加与删除文本框的例子，当然添加与删除其它的页面元素也是可行的。有需要的朋友参考学习下。

js实现动态添加、删除文本框。
例子：

复制代码代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<title>动态添加、删除文本框 - www.jiaochengji.com </title> 

</head> 

<body> 

<script type="text/javascript"> 

var count = 0; 

function Add(num){ 

count += 1;

var File1 = document.getElementById("file1"); 

var div = document.createElement("div"); 

var countTxt = document.createTextNode("文本框"+count); 

var inputTxt = document.createElement("input"); 

inputTxt.type = "text"; 

inputTxt.value = document.getElementById(num).value; 

inputTxt.name = "txt"+count; 

var inputTxta = document.createElement("input"); 

inputTxta.type = "text"; 

inputTxta.value = document.getElementById("a"+num).value; 

inputTxta.name = "txt"+count; 

var inputTxtaa = document.createElement("input"); 

inputTxtaa.type = "text"; 

inputTxtaa.value = document.getElementById("aa"+num).value; 

inputTxtaa.name = "txt"+count; 

var inputTxtaaa = document.createElement("input"); 

inputTxtaaa.type = "text"; 

inputTxtaaa.value = document.getElementById("aaa"+num).value; 

inputTxtaaa.name = "txt"+count; 

var inputTxtaaaa = document.createElement("input"); 

inputTxtaaaa.type = "text"; 

inputTxtaaaa.value = document.getElementById("aaaa"+num).value; 

inputTxtaaaa.name = "txt"+count; 

var btn = document.createElement("input"); 

btn.type = "button"; 

btn.value = "删除"; 

btn.onclick = function() 

{ 

this.parentNode.parentNode.removeChild(this.parentNode);

var n = File1.getElementsByTagName("div"); 

for(var k=0; k<n.length; k++) 

{ 

n[k].firstChild.nodeValue = "文本框"+(k+1); 

} 

count -= 1; 

}

div.appendChild(countTxt); 

div.appendChild(inputTxt); 

div.appendChild(inputTxta); 

div.appendChild(inputTxtaa); 

div.appendChild(inputTxtaaa); 

div.appendChild(inputTxtaaaa); 

div.appendChild(btn); 

File1.appendChild(div); 

} 

</script> 

<div id="file1"> </div>

<input name="xiyaoname" id="1" value="追加记录" type="button" onclick="Add(1);" /> 

<input name="hiddenField" type="hidden" id="a1" value="sex" /> 

<input name="hiddenField" type="hidden" id="aa1" value=" birthday" /> 

<input name="hiddenField" type="hidden" id="aaa1" value="shenggao" /> 

<input name="hiddenField" type="hidden" id="aaaa1" value="tizhong" /> 

</body> 

</html>

您可能感兴趣的文章：
js动态添加、删除文本框的例子
 JS动态添加与删除控件的代码一例
 动态添加与删除select中Option对象的JS脚本
 js动态添加删除表格行的代码
 javascript操作Select options集合的实例介绍
 js添加删除div的例子
 jquery动态添加option示例
 JS数组中添加与删除内容的方法
 js动态添加、修改、删除对象的属性与方法
 js dom编程之动态创建、删除元素的实例

上一篇：设置checkbox复选框为readonly只读的两种方式下一篇：js获取url中参数值的两种方法

[关闭]

js动态添加、删除文本框的例子

最近更新

浏览排行