输入框的加减实现：

<html>

<head>

    <meta charset="utf-8">

    <title>动态创建按钮</title>

    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>

</head>

<body>

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="AddMoreFileBox" class="btn btn-info">添加更多的input输入框</a></span></p>

<div id="InputsWrapper">

    <div><input type="text" name="mytext[]" id="field_1" value="Text 1"/><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="removeclass"><input type='button' value='删除'></a></div>

</div>

<script>

    $(document).ready(function() {

        var MaxInputs    = 8; //maximum input boxes allowed

        var InputsWrapper  = $("#InputsWrapper"); //Input boxes wrapper ID

        var AddButton    = $("#AddMoreFileBox"); //Add button ID

        var x = InputsWrapper.length; //initlal text box count

        var FieldCount=1; //to keep track of text box added

        $(AddButton).click(function (e) //on add input button click

        {

            if(x <= MaxInputs) //max input box allowed

            {

                FieldCount++; //text box added increment

                //add input box

                $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="removeclass"><input type="button" value="删除"></a></div>');

                x++; //text box increment

            }

            return false;

        });

        $("body").on("click",".removeclass", function(e){ //user click on remove text

            if( x > 1 ) {

                $(this).parent('div').remove(); //remove text box

                x--; //decrement textbox

            }

            return false;

        })

    });

</script>

</body>

</html>

效果：

2、把上面的输入框的值ajax传回后台参考：

// 创建map，放入可变数量的输入框对组成的key-value

$("#opt_send").click(function(){

    console.log(x);

    var map = {}

    for (var i = 1; i <= x; i++) {

        var key = $("#field_1_" + i).val();

        var value = $("#field_2_" + i ).val();

        map[key]=value;

    }

    // 使用JSON.stringify()方法解析，防止后台json数据显示[object Object]

    var json= JSON.stringify(map);

    jQuery.ajax({

        url: "/test_tool/bizComponent.json",

        type:"POST",

        data: {

            aa: $("#opt_aa").val(),

            bb: $("#opt_bb").val(),

            inputParameters: json

        },

        success: function(data){

            if(data.success){

            }else{

            }

        }

    })

})

jQuery动态添加、删除按钮及input输入框的更多相关文章

  1. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  2. jQuery动态添加删除与添加表行代码

    具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...

  3. jquery动态添加删除div--事件绑定,对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

  4. jQuery动态添加删除select项

    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...

  5. jquery动态添加/删除 tr/td

    <head runat="server"> <title></title> <!--easyui --> <link rel= ...

  6. Jquery动态添加/删除表格行和列

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. ASP.NET+ashx+jQuery动态添加删除表格

    aspx: <script src="../script/jquery-1.4.4.min.js" type="text/javascript" lang ...

  8. Jquery动态添加 删除 操作实现

    这是gridView为空数据时显示的表头 下面直接填代码: function Add() { //动态添加行 $("#gridCustomerView").append(" ...

  9. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

随机推荐

  1. MySQL优化面试

    原则:尽量使用整型表示字符串 存储IP INET_ATON(str),address to number INET_NTOA(number),number to address MySQL内部的枚举类 ...

  2. 20190404-transition、transform转换、animation、媒体查询

    目录 1.transition过渡 1.1简写:transiton:transition-property | transition-duration | transition-timing-func ...

  3. MySQL， XE7使用FireDAC连接MySQL数据库

    发现使用DBExpress进行MySQL连接老是有莫名其妙的问题,直接改为FireDAC 在上一篇的DataSnap服务框架程序中,将连接的数据库由MSSQL改为本文的MySQL 使用的MySQL数据 ...

  4. MySQL 基础知识梳理学习（六）----锁

    1.什么是锁: 对共享资源进行并发访问控制,提供数据的完整性和一致性. 2.锁的区别: 类型 lock latch 对象 事务 线程 保护 数据库内容 内存数据结构 持续时间 整个事务过程 临界资源 ...

  5. 抓包工具Charles安装时需要注意的地方

    最新接到一个任务,需要为app端的升级提供新的接口.以前没有搞过这个,其实搞完之后也就那样!其中有很重要的一点,就是需要用到抓包工具,进行联调测试,观看app端的数据情况. 抓包工具最常用的两个:fi ...

  6. Win32 Ime

    Win32 Ime API: ImmGetContext: 获取指定窗口的当前的输入上下文,然后再尝试访问上下文中的信息.应用程序应该定期使用这个功能获取窗口的当前的输入上下文.若hWnd参数为零,将 ...

  7. 浏览器仿EXCEL表格插件 版本更新 - 智表ZCELL产品V1.3.1更新

    智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...

  8. springboot 定时任务

    1.启动类新增注解 @EnableScheduling import org.springframework.boot.SpringApplication; import org.springfram ...

  9. Linux：Day18(上) dns服务基础进阶

    DNS:Domain Name Service,协议(C/S,53/udp,53/tcp):应用层协议. BIND:Bekerley Internat Name Domain,ISC(www.isc. ...

  10. pycharm 远程调试代码

    我们在本地开发的时候,有时候需要使用到远程服务器的环境,如我们在调试微信或支付宝支付的时候. 那我们如何通过本地pycharm环境连接远程服务器进行调试呢? 1.pycharm和远程服务器连接 1)点 ...