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

  • 相关阅读:
    Python之CVXOPT模块
    JavaScript之读取和写入cookie
    jQuery学习(2)ajax()使用
    JavaScript之使用AJAX(适合初学者)
    Jquery焦点图实例
    jquery-mobile表单提交问题
    程序员笔记|Spring IoC、面向切面编程、事务管理等Spring基本概念详解
    使用什么调试swoole程序
    swoole模块的编译安装:php编译安装swoole模块的代码
    TP5使用Redis处理电商秒杀
  • 原文地址:https://www.cnblogs.com/iLoveMyD/p/3481059.html
Copyright © 2020-2023  润新知