输入框的加减实现：

<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. 第十二课 CSS基本选择器 css学习2

    基础选择器一.标签选择器(元素选择器)标签选择器是指用HTML标签名称作为选择器,按标签名称分类语法:标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;} 二.类选择器1.类选择器使用&q ...

  2. MySQL向数据库表的某字段追加数据

    使用CONCAT()函数 mysql向表中某字段后追加一段字符串(field为字段名): update table_name set field=CONCAT(field,'str',) mysql ...

  3. Scrum笔记

    Scrum的笔记,需要的童鞋拿去,有错漏处请指正,谢谢. 出处:https://www.cnblogs.com/Ryu666/p/9890609.html

  4. [20190416]process allocation latch.txt

    [20190416]process allocation latch.txt --//看链接:http://andreynikolaev.wordpress.com/2010/12/16/hidden ...

  5. SQL SERVER 2012 AlwaysOn - 维护篇 03

    搭建 AlwaysOn 是件非常繁琐的工作,需要从两方面考虑,操作系统层面和数据库层面,AlwaysOn 非常依赖于操作系统,域控,群集,节点等概念: DBA 不但要熟悉数据库也要熟悉操作系统的一些概 ...

  6. Storm入门-Storm与Spark对比

    作为一名程序员通病就是不安分,对业界的技术总要折腾一番,哪怕在最终实际工作中应用到的就那么一点.最近自己准备入门Storm学习,关于流式大数据框架目前比较流行的有Spark和Storm等,在入门之前, ...

  7. Spring JPA 使用@CreatedDate、@CreatedBy、@LastModifiedDate、@LastModifiedBy 自动生成时间和修改者

    JPA Audit 在spring jpa中,支持在字段或者方法上进行注解@CreatedDate.@CreatedBy.@LastModifiedDate.@LastModifiedBy,从字面意思 ...

  8. C# -- 等待异步操作执行完成的方式

    C# -- 等待异步操作执行完成的方式 1. 等待异步操作的完成,代码实现: class Program { static void Main(string[] args) { Func<int ...

  9. Navicat 进行数据库自动备份

    今天经历一次数据库丢库事件,顿时觉得定时备份数据库很重要. 但是每天自己手动备份实在是太麻烦了,于是乎,想到用计划任务进行每天定时自动备份. 发现Navicat自带就有备份  还可以直接计划任务,贼方 ...

  10. 017_python常用小技巧

    一.进行十六进制运算 print(hex(int("6500000001", 16) - int("640064c6e7",16))) 0xff9b391a