2013年12月18日 20:56:29
场景:
批量添加 友情链接 功能
每个友情链接记录有3个字段:名字(name),超链接(url),排序(order)
要求每次点击"添加"按钮,就一次性生成3个input框,不同的name值可以存储上边3个元素
可以在提交前多次点击,也就是生成多组友情链接信息,一并提交又不能相互覆盖
html
1 <div id="friendlink" currentindex=""></div> 2 <input type="button" onclick="addlink();" value="添加" />
js
1 <script type="text/javascript"> 2 function addlink(){ 3 var x = 1; 4 var linkdiv = document.getElementById("friendlink"); 5 if (linkdiv.attributes.currentindex.value) { 6 var tmp = linkdiv.attributes.currentindex.value; 7 x = parseInt(tmp) + 1; 8 } 9 linkdiv.setAttribute('currentindex', x); 10 11 var yname = 'link[js'+x+'][name]'; 12 var yurl = 'link[js'+x+'][url]'; 13 var yorder = 'link[js'+x+'][order]'; 14 15 var input1 = document.createElement('input'); 16 input1.setAttribute('type', 'text'); 17 input1.setAttribute('name', yname); 18 19 var input2 = document.createElement('input'); 20 input2.setAttribute('type', 'text'); 21 input2.setAttribute('name', yurl); 22 23 var input3 = document.createElement('input'); 24 input3.setAttribute('type', 'text'); 25 input3.setAttribute('name', yorder); 26 27 var br = document.createElement('br'); 28 29 linkdiv.insertBefore(input1,null); 30 linkdiv.insertBefore(input2,null); 31 linkdiv.insertBefore(input3,null); 32 linkdiv.insertBefore(br,null); 33 } 34 </script>
火狐下测试成功,其他浏览器没有测试
2014年5月22日 09:57:04
获得自定义属性:
linkdiv.getAttribute();
linkdiv.setAttribute();