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. k8s集群部署之环境介绍与etcd数据库集群部署

    角色 IP 组件 配置 master-1 192.168.10.11 kube-apiserver kube-controller-manager kube-scheduler etcd 2c 2g ...

  2. mysql单实例多库与多实例单库

    一.单实例多库: 一个mysql实例,创建多个数据目录. 规划: 实例路径:/usr/local/mysql 数据目录路径: (1)/usr/local/mysql/data (2)/usr/loca ...

  3. MySQL 优化 之 Copying to tmp table on disk

    项目中遇到了慢查询问题 Sql语句 SELECT sum(price) AS price, `member_id` FROM `crm_upload` GROUP BY member_id ORDER ...

  4. .NET中的缓存实现

    软件开发中最常用的模式之一是缓存,这是一个简单但非常有效的概念,想法是重用操作结果,执行繁重的操作时,我们会将结果保存在缓存容器中,下次我们需要该结果时,我们将从缓存容器中取出它,而不是再次执行繁重的 ...

  5. SHELL十三问[转载自CU论坛]

    原文地址:http://bbs.chinaunix.net/thread-218853-1-1.html 一.为什么称作shell? http://bbs.chinaunix.net/viewthr ...

  6. 今年把js总结了一下，ppt格式的

    本来想梳理成html,但是时间有限. 希望能够有所帮助. http://pan.baidu.com/s/1ntGAfED http://files.cnblogs.com/danghuijian/js ...

  7. fiddler终极教程

    http://www.cnblogs.com/yoyoketang/tag/fiddler/

  8. Extjs中获取grid数据

    (1)grid.getStore().getRange(0,store.getCount()); //得到grid所有的行 (2)grid.getSelectionModel().getSelecti ...

  9. IDEA将Maven项目中src源代码下的xml配置文件编译进classes

    遇到这样的情况,maven项目启动报错,src中某个包下面的xml文件找不到. eclipse编译项目会自动将xml配置文件编译进classes,IDEA却不行 在报错项目的pom.xml文件中添加: ...

  10. Jmeter用于接口测试中，关联如何实现

    Jmeter用于接口测试时,后一个接口经常需要用到前一次接口返回的结果,应该如何获取前一次请求的结果值,应用于后一个接口呢,拿一个登录的例子来说明如何获取. 1.打开jmeter, 使用的3.3的版本 ...