html代码例如以下

<html>

    <tr><button style="margin-left:10px" class="add_field_button btn">Add</button></tr>

    <tbody class="input_fields_wrap"></tbody>

</html>

js代码例如以下

<script>

   var max_fields      = 5; //maximum input boxes allowed

    var wrapper          = $(".input_fields_wrap"); //Fields wrapper

    var add_button    =(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count

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

        e.preventDefault();

        if(x < max_fields){ //max input box allowed

            x++; //text box increment

            $(wrapper).append('<tr style=""><td></td><td><button  class="remove_field btn">Del</button></td></tr>'); //add input box

            }

    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text

        e.preventDefault(); $(this).closest('tr').remove(); x--;

    })

</script>

jquery 动态添加，降低input表单的方法的更多相关文章

  1. jquery实现ajax提交form表单的方法总结

    本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一:  function AddHandlingFeeToRefund( ...

  2. 如何给动态添加的form表单控件添加表单验证

    最近使用jQuery Validate做表单验证很方便,api地址为http://www.runoob.com/jquery/jquery-plugin-validate.html 但是在使用的时候也 ...

  3. jquery实现ajax提交form表单的方法总结（转）

    方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() {            var AjaxURL= "../OrderManagement ...

  4. angular 1.2.29版本下 动态添加多个表单、 校验全部、 提交 、ng-form方案

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 为何jquery动态添加的input value无法提交到数据库？【坑】

    有两个输入框,我想让第一个输入框失去焦点以后,第二个输入框自动获取第一个输入框的value为默认值,jquery代码如下,可以正常显示,但是用PHP提交数据,并插入数据库的时候确实空值,尚未查找到原因 ...

  6. 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题

    解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...

  7. jquery监听动态添加的input的change事件

    使用下面方法在监听普通的input的change事件正常 $('#pp').on('change', 'input.videos_poster_input', function () { consol ...

  8. 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能

    当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...

  9. 使用jQuery，实现完美的表单异步提交

    jQuery异步提交表单 <form id="form1" method="post"> <table border="1" ...

随机推荐

  1. Mac 查看端口情况

    一个进程可以占用多个端口. 查看某个进程占用哪些端口: lsof -nP | grep TCP | grep -i 进程名 ➜ cocos_creator lsof -nP | grep TCP | ...

  2. hard fault 学习记录

    使用 segger 的 hard fault 的源文件后,当调试时,发生硬件错误的时候,可以查看 HardFaultRegs 中的内容,并对比 segger_HardFaultHandler.c 中的 ...

  3. CPP-基础：inline

    背景: 在C&C++中 一.inline关键字用来定义一个类的内联函数,引入它的主要原因是用它替代C中表达式形式的宏定义. 表达式形式的宏定义一例: #define ExpressionNam ...

  4. canvas之刮刮乐

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. LinkedList集合（JDK1.8）

    简述 按照上篇笔记ArrayList集合继续进行介绍list的另一个常见子类LinkedList ?LinkedList介绍 1.数据结构 说明:linkedlist的底层数据结构是个双向链表结构,也 ...

  6. java（List或Array数组）求交集、并集、差集, 泛型工具类

    业务需要求不同类型的交集.并集.差集为避免代码冗余编写工具类. 注:list 转数组需传入数组,如果将原数组传入将会改变原数组的值,同时泛型数组又不可以实例化,解决方案:Arrays.copyOf(n ...

  7. 【struts2】学习笔记

    常见问题及注意事项: 1.下载struts2时,要看清所下载的版本,不同版本web.xml配置路径不同! 2. 导入jar包时,导入的包要完全准确,缺少或过多的会导致缺失或冲突! 3. Registe ...

  8. webpack 之 loader

    loader简介 loader在webpack.config.js中进行配置,配置之后,会自动检测打包过程中引入的文件(import或require),通过test成功匹配被引入的文件名后,会对文件内 ...

  9. 条款30：透彻了解inline的里里外外（understand the ins and outs of inlining）

    NOTE: 1.将大多数inline限制在小型 被频繁调用的函数身上.这可使日后的调试过程和二进制升级(binary upgradability)更容易,也可使潜在的代码膨胀问题最小化, 使程序的速度 ...

  10. 【终极指南】图文详解Chrome插件离线安装方法

    Chrome插件离线安装背景介绍 因为无法访问Google所以国内用户目前大多只能通过第三方比如我们Chrome插件网下载插件,然后离线安装.Chrome官方自67版本后,只允许用户通过谷歌应用商店安 ...