JavaScript动态添加信息的实现

发布时间：2018-10-06 13:21:37 所属栏目：模式来源：站长网

导读：今天说下JS动态添加数据信息是如何实现的。由于本人能力有限，所以只能用最傻的方式来做了。不过也算是实现了功能吧!就是点击按钮可以不断的添加。我的思路是这样式的，首先得有一个模版，然后点击模版的时候，不断的出现这个模版的复制品就OK了，好像很

　　今天说下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.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

　　（本文转载于：lovewebgames.com）

（编辑：济宁站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!