你的位置:首页 > Java教程

[Java教程]动态添加一个文本框并带有删除按钮

动态添加一个文本框并带有删除按钮:
在实际操作中可能需要动态的创建和删除一个元素,比较常见的就是动态的添加一个文本框和一个删除按钮,点击删除按钮可以删除相应的文本框,下面就结合一个实例详细介绍一下如何实现此效果。
代码实例如下:

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /><head><title>添加和删除文本框-蚂蚁部落</title><style type="text/css">ul{ list-style:none}</style><script type="text/javascript">window.onload=function(){ var main=document.getElementById("main"); var bt=document.getElementById("bt"); bt.onclick=function(){  var len=main.getElementsByTagName("li").length;  var oul=main.getElementsByTagName("ul")[0];  var oli=document.createElement("li");  var input=document.createElement("input");  var button=document.createElement("input");  input.id="id"+len;  input.type="text";  button.type="button";  button.id="bt"+len;  button.value="点击删除";  oli.appendChild(input);  oli.appendChild(button);  oul.appendChild(oli);  button.onclick=function(){    button.parentNode.remove(button.parentNode);  } } }</script></head><body><input type="button" value="点击添加一项" id="bt" /><div id="main"><ul>  <li><input type="text"></li></ul> </div></body></html>

以上代码实现了我们的需求,可以点击动态生成和删除文本框,下面就介绍一下实现过程。
一.实现原理:
为添加按钮注册事件处理函数,点击的时候将动态的创建文本框和删除按钮,然后为创建的删除按钮注册事件处理函数,点击的时候就会删除当前按钮所在的li元素,就这么简单。
二.代码注释:
1.window.onload=function(){},文档加载完毕再去执行函数中的代码。
2.var main=document.getElementById("main"),获取id属性值为main的元素。
3.var bt=document.getElementById("bt"),获取id属性值为bt的元素。
4.bt.onclick=function(){},为bt绑定事件处理函数。
5.var len=main.getElementsByTagName("li").length,获取main下面li元素的数目。
6.var oul=main.getElementsByTagName("ul")[0],获取main下面的第一个ul元素。
7.var oli=document.createElement("li"),创建一个li元素。
8.var input=document.createElement("input"),创建一个input元素。
9.input.id="id"+len,设置input对象的id属性值,不设置这里也么什么影响。
10.input.type="text",将input的type属性设置为text,也就是文本框。
11.button.type="button",将一个创建的input元素的type属性值设置为button,即创建一个按钮。
12.button.id="bt"+len,设置id属性值,不设置也没关系。
13.button.value="点击删除",设置按钮的value属性值。
14.oli.appendChild(input),为li元素添加文本框。
15.oli.appendChild(button),为li元素添加按钮。
16.oul.appendChild(oli),为ul元素添加li。
17.button.onclick=function(){},为当前创建的删除按钮绑定事件处理函数。
18.button.parentNode.remove(button.parentNode),删除当前按钮所在的li元素。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8308

更多内容可以参阅:http://www.softwhy.com/javascript/