输入框的加减实现：

<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. Vue 无限滚动加载指令

    也不存在什么加载咯, 就是一个判断滚动条是否到达浏览器底部了. 如果到了就触发事件,米到就不处理. 计算公式提简单的   底部等于(0) =  滚动条高度 - 滚动条顶部距离 - 可视高度.  反正结 ...

  2. Django 信号signal

    序言 Django自带一套信号机制来帮助我们在框架的不同应用位置之间传递信息.也就是说,当某一事件发生时,信号系统可以允许一个或多个发送者(senders)将信号(signals)发送给一组接收者(r ...

  3. Linux-Redmine安装方法

    Linux-Redmine安装方法 QQ群交流:585499566 一.环境准备 1,Linux系统:centos6.5 2,Redmine安装包:bitnami-redmine-3.4.6-0-li ...

  4. Docker-单宿主机下的网络模式

    docker利用namespaces和cgroups实现了应用隔离和资源控制,那么网络层优势如何实现的呢?是直接使用宿主机的网卡设备,还是独立创造出自己的网络设备?以及容器如何与外界通信,下面我们通过 ...

  5. 关于Android Studio 代理

    1.需要代理 首次使用Android Studio需 推荐代理 大连东软信息学院镜像服务器地址: - http://mirrors.neusoft.edu.cn 端口:80 2.不需要代理 检查更新, ...

  6. Python之爬虫的理解

    #  -*- coding: utf-8 -*-  中文用户一定先用这行来声明编码方式 爬虫: 爬虫是自动访问互联网,并且提取数据的程序  (从网络上获取非结构化的数据,ETL将这些数据转换为结构化数 ...

  7. redis报错：java.net.SocketException: Broken pipe (Write failed); nested exception is redis.clients.jedis.exceptions.JedisConnectionException: java.net.SocketException: Broken pipe (Write failed)

    最近写了一个服务通过springboot构建,里面使用了redis作为缓存,发布到服务器运行成功,但是有时候会报redis的错误:org.springframework.data.redis.Redi ...

  8. HelloHibernate的创建过程

    文章提纲 安装与配置 开发小结 建立项目 配置项目 创建代码 执行项目 安装与配置 JDK的安装:建议使用JRE 1.8以上: SQL Server 2000的安装:建议SQL Server 2000 ...

  9. Java8-2-Lambda表达式实战-一句话实现Map中按照Value排序

    在上一讲中, 我们着重的讲了表达式的一些基础知识和基本的使用, 今天我们来实战一把, 对Map的Value值排序进行简化. 在以前的思路我们的做法如下: /** * * Map根据value排序; * ...

  10. Python的生成器send()方法 & yield_from

    生成器对象是一个迭代器.但是它比迭代器对象多了一些方法,它们包括send方法,throw方法和close方法.这些方法,主要是用于外部与生成器对象的交互.本文先介绍send方法. send send方 ...