输入框的加减实现：

<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. Python二级-----------程序冲刺4

    1. 根据输入正整数 n,作为财务数据,输出一个宽度为 20 字符,n 右对齐显示,带千位分隔符的效果,使用减号字符“-”填充.如果输入正整数超过 20 位,则按照真实长度输出.提示代码如下:‪‬‪‬ ...

  2. datatable动态列处理，重绘表格(敲黑板，划重点！！！我肝了一天半才彻底弄懂这个东西，TAT)

    datatable动态列处理,重绘表格 前言:至于动态列的绘画,我前面博客已经写过了,就是动态列的配置问题,不懂的去我博客看下,今天要写的呢,就是你已经写了一个动态列在datatable,现在你想重新 ...

  3. Jmeter接口测试实战-数据传递

    Jmeter接口测试实战-数据传递 接口与接口之间没有关联的测试是缺乏意义和没有灵魂的,只有数据在不同接口之间传递才能勾画出业务场景重要的链路. 我们用较为通用的http/https协议,接口普遍返回 ...

  4. （爬虫）requests库

    一.requests库简介 urllib库和request库的作用一样,都是服务器发起请求数据,但是requests库比urllib库用起来更方便,它的接口更简单,选用哪种库看自己. 如果没有安装过这 ...

  5. selenium-日志文件的使用(十二)

    概述 在自动化测试中,如果测试失败需要对错误的错误的代码或者测试case进行分析,进行分析时最好的方法是在项目中添加日志文件,通过日志文件的分析定位出现错误的原因. 这样可以保持自动化测试用例的健壮性 ...

  6. c# 多线程 --Mutex（互斥锁） 【转】

    互斥锁(Mutex) 互斥锁是一个互斥的同步对象,意味着同一时间有且仅有一个线程可以获取它. 互斥锁可适用于一个共享资源每次只能被一个线程访问的情况 函数: //创建一个处于未获取状态的互斥锁 Pub ...

  7. MacBook Pro 安装win7 64 成功安装过程总结

    安装对象: MacBook Pro (13 英寸, 2010 年中) 中安装win7 64位操作系统(原版安装非Ghost),且只保留win7系统即可. 场景还原: 拿到笔记本时,笔记本中已无Mac ...

  8. Ubuntu 16.04 安装GIMP绘图软件

    Ubuntu上比较好用的绘图软件,GIMP,安装方法如下: 终端输入 : sudo apt-get install gimp ,回车,输入密码,即可安装简单易行. 输入 :gimp ,启动程序.

  9. LeetCode算法题-Reach a Number（Java实现）

    这是悦乐书的第310次更新,第331篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第179题(顺位题号是754).你站在无限数字线的0号位置.在目的地有个target.在 ...

  10. 数据库【redis】基本命令

    redis常用命令大全   1.基于内存的key-value数据库 2.基于c语言编写的,可以支持多种语言的api //set每秒11万次,取get 81000次 3.支持数据持久化 4.value可 ...