当前位置:编程学习 > JS >>

javascript动态增加文本输入框并带删除按钮代码

网页特效动态增加文本输入框并带删除按钮代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.zzzyk.com/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>网页特效动态增加文本输入框并带删除按钮代码</title>
</head>
<body>
<div id="d">
<input type="text"  />
</div>
<input type="button" id="b" value="添加" />
</body>
<script language="javascript">
document.getelementbyid("b").onclick=function(){
  document.getelementbyid("d").innerhtml+='<br><input type="text"  />';
}
</script>
</html>

方法二带删除按钮

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.zzzyk.com/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="d">
<input type="text" name="text_0"/>
</div>
<input type="button" id="b" value="添加"/>
</body>
<script language="javascript">
i = 1;
document.getelementbyid("b").onclick=function(){
  document.getelementbyid("d").innerhtml+='<div id="div_'+i+'"><input name="text" name="text_'+i+'" type="text"  /><input type="button" value="删除"  onclick="del('+i+')"/></div>';
  i = i + 1;
}
function del(o){
 document.getelementbyid("d").removechild(document.getelementbyid("div_"+o));
}
</script>


</html>

补充:网页制作,js教程 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,