當(dāng)前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript动态添加一组input
生活随笔
收集整理的這篇文章主要介紹了
javascript动态添加一组input
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
2013年12月18日 20:56:29
場景:
批量添加 友情鏈接 功能
每個友情鏈接記錄有3個字段:名字(name),超鏈接(url),排序(order)
要求每次點擊"添加"按鈕,就一次性生成3個input框,不同的name值可以存儲上邊3個元素
可以在提交前多次點擊,也就是生成多組友情鏈接信息,一并提交又不能相互覆蓋
html
<div id="friendlink" currentindex=""></div>
<input type="button" onclick="addlink();" value="添加" />
js
<script type="text/javascript">
function addlink(){
var x = 1;
var linkdiv = document.getElementById("friendlink");
if (linkdiv.attributes.currentindex.value) {
var tmp = linkdiv.attributes.currentindex.value;
x = parseInt(tmp) + 1;
}
linkdiv.setAttribute('currentindex', x); var yname = 'link[js'+x+'][name]';
var yurl = 'link[js'+x+'][url]';
var yorder = 'link[js'+x+'][order]'; var input1 = document.createElement('input');
input1.setAttribute('type', 'text');
input1.setAttribute('name', yname); var input2 = document.createElement('input');
input2.setAttribute('type', 'text');
input2.setAttribute('name', yurl); var input3 = document.createElement('input');
input3.setAttribute('type', 'text');
input3.setAttribute('name', yorder); var br = document.createElement('br'); linkdiv.insertBefore(input1,null);
linkdiv.insertBefore(input2,null);
linkdiv.insertBefore(input3,null);
linkdiv.insertBefore(br,null);
}
</script>
火狐下測試成功,其他瀏覽器沒有測試
2014年5月22日 09:57:04
獲得自定義屬性:
linkdiv.getAttribute();
linkdiv.setAttribute();
總結(jié)
以上是生活随笔為你收集整理的javascript动态添加一组input的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 土壤墒情自动监测仪:实现远程监测和数据传
- 下一篇: Springboot加载静态图片