您當(dāng)前位置：首頁(yè) > web前端 > jscript > JavaScript動(dòng)態(tài)添加信息的實(shí)現(xiàn)

JavaScript動(dòng)態(tài)添加信息的實(shí)現(xiàn)

來(lái)源：程序員人生發(fā)布時(shí)間：2014-05-19 15:14:15 閱讀次數(shù)：2668次

　　今天說(shuō)下JS動(dòng)態(tài)添加數(shù)據(jù)信息是如何實(shí)現(xiàn)的。由于本人能力有限，所以只能用最傻的方式來(lái)做了。不過(guò)也算是實(shí)現(xiàn)了功能吧!就是點(diǎn)擊按鈕可以不斷的添加。

　　我的思路是這樣式的，首先得有一個(gè)模版，然后點(diǎn)擊模版的時(shí)候，不斷的出現(xiàn)這個(gè)模版的復(fù)制品就OK了，好像很簡(jiǎn)單，是的，確實(shí)很簡(jiǎn)單，因?yàn)槲乙膊恢涝趺醋霾攀亲顑?yōu)的，但它確實(shí)能夠這樣實(shí)現(xiàn)。

　　為了大家更好理解代碼,我就不用Jquery.js來(lái)做了.實(shí)在沒(méi)啥好說(shuō)的了.就是點(diǎn)擊按鈕就在尾部把模版復(fù)制一份就行了,大家直接看實(shí)例,不明白的在QQ群(5678537,70210212)里提問(wèn)吧。

　　查看DEMO：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>JS動(dòng)態(tài)添加信息 - QQ技術(shù)群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;">如不能顯示效果，請(qǐng)按Ctrl+F5刷新本頁(yè)，更多網(wǎng)頁(yè)代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></div>
提示：可修改后代碼再運(yùn)行!

　　（本文轉(zhuǎn)載于：lovewebgames.com）

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

------分隔線----------------------------

上一篇 Oracle listener靜態(tài)及動(dòng)態(tài)注冊(cè)總結(jié)

下一篇 嘆一下我的 jskit 的核心代碼

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

JavaScript動(dòng)態(tài)添加信息的實(shí)現(xiàn)