• javascript动态添加一组input


    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();

  • 相关阅读:
    Flutter图片选择 image_picker(官方)插件使用详解
    androidstudo如何跨越这个厚厚的墙,亲测有效 Could not resolve com.android.tools.build:gradle:
    qwq。。胡诌qwq
    关于很狗的军训qwq
    Leetcode每日一题 503.下一个更大元素II
    C++ 关于volatlie
    C++虚成员函数与动态联编
    graphics pipeline
    pointer or function
    线段树
  • 原文地址:https://www.cnblogs.com/iLoveMyD/p/3481059.html
Copyright © 2020-2023  润新知