今天说下JS动态添加数据信息是如何实现的。由于本人能力有限，所以只能用最傻的方式来做了。不过也算是实现了功能吧!就是点击按钮可以不断的添加。
我的思路是这样式的，首先得有一个模版，然后点击模版的时候，不断的出现这个模版的复制品就OK了，好像很简单，是的，确实很简单，因为我也不知道怎么做才是最优的，但它确实能够这样实现。
为了大家更好理解代码,我就不用Jquery.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function Add(){
var info=document.getElementById("info");
var template=document.getElementById("template");
var LR=template.innerHTML;
info.insertAdjacentHTML("BeforeEnd",LR)
}
function Save(){
var list = document.getElementById("info").getElementsByTagName("input");
for(var i=0;i<list.length;i++){
alert(list[i].value);
}
}
</script>
</head>
<body>
<p>可以用AJAX传值,也可以用request.form("txtName")这种形式得到值.</p>
<div class="code">
<div id="template" style="display:block;display:none;">
<div>
<div>姓名:<input type="text" name="txtName"/></div>
<div>年龄:<input type="text" name="txtAge"/></div>
</div>
</div>
<div><input type="button" value="添加" onclick="Add()"/></div>
<div id="info"></div>
<div><input type="button" value="保存" onclick="Save()"/></div>
</div>
</body>
</html>
上一篇：手机触摸屏的JS事件
讨论数量：0
