程序员人生网站导航

JavaScript动态添加信息的实现

栏目：jscript时间：2014-05-19 15:14:15

　　今天说下JS动态添加数据信息是如何实现的。由于本人能力有限，所以只能用最傻的方式来做了。不过也算是实现了功能吧!就是点击按钮可以不断的添加。

　　我的思路是这样式的，首先得有一个模版，然后点击模版的时候，不断的出现这个模版的复制品就OK了，好像很简单，是的，确实很简单，因为我也不知道怎么做才是最优的，但它确实能够这样实现。

　　为了大家更好理解代码,我就不用Jquery.js来做了.实在没啥好说的了.就是点击按钮就在尾部把模版复制一份就行了,大家直接看实例,不明白的在QQ群(5678537,70210212)里提问吧。

　　查看DEMO：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>JS动态添加信息 - QQ技术群5678537.70210212</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="MSSmartTagsPreventParsing" content="true" /><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><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></div>
提示：可修改后代码再运行!

　　（本文转载于：lovewebgames.com）

------分隔线----------------------------

上一篇 Oracle listener静态及动态注册总结

下一篇 叹一下我的 jskit 的核心代码

------分隔线----------------------------