输入框的加减实现：

<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. spring boot拦截器中获取request post请求中的参数

    最近有一个需要从拦截器中获取post请求的参数的需求,这里记录一下处理过程中出现的问题. 首先想到的就是request.getParameter(String )方法,但是这个方法只能在get请求中取 ...

  2. git操作常用命令

    一.使用git 1.git是什么? Git是目前世界上最先进的分布式版本控制系统. SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己 ...

  3. Django 无名参数与有名参数

    无名参数 配置 urls ,我们需要导入 url 模块,以()定义一个无名的变量 from django.contrib import admin from django.urls import pa ...

  4. Dynamics 365-关于BPF的进一步探究

    关于BPF是什么,以及如何在CRM中配置BPF,可以参阅熊宸大神的博客Dynamics 365 Business Process Flow -- 让你不再惧怕复杂的业务流程! 1. CRM中发生了什么 ...

  5. python字典结构化数据

    https://www.cnblogs.com/evablogs/p/6692947.html dict: 键-值(key-value)对集合{key:value},查找速度极快,但浪费内存. 1 2 ...

  6. 将对象xml序列化和反序列化

    //将一个对象按XML序列化的方式写入到一个文件,使用的默认的UTF8编码格式 //o为要序列化的对象 //path保存文件的路径 public static object  _lockObj=new ...

  7. fastjson SerializerFeature详解

  8. Windows上安装MySQL的完整教程

    1.     首先去官方网站下载压缩文件:https://dev.mysql.com/downloads/mysql/ 2.     解压下载的文件. 3.     将解压的所有文件放在一个文件夹里( ...

  9. Chrome 清除当前网站下的缓存

    打开开发者工具(F12),选择 Network--Disable cache 即可.需要清除某网站缓存时 F12 打开开发者工具就会自动清除这个网站的缓存,而不必清除所有网站的缓存了. 如评论中大佬所 ...

  10. June. 27th 2018, Week 26th. Wednesday

    To be great, truly great, you have to be the kind of person who makes the others around you great. 要 ...