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. index 定义 v-for 未使用变量 实际是没有 :key="index"

    需要有 :key="index" <Checkbox :label="item.key" :key="index" v-for=&qu ...

  2. 课外作业（建立double类型的小数，按照四舍五入保留2位小数）

    举例:

  3. 暑假集训 || 区间DP

    区间DP 经典石子合并问题V1    复杂度 On3 int a[SZ], sum[SZ], f[SZ][SZ]; int main() { int n; scanf("%d", ...

  4. 关于Java多线程（JAVA多线程实现的四种方式）

    Java多线程实现方式主要有四种:继承Thread类.实现Runnable接口.实现Callable接口通过FutureTask包装器来创建Thread线程.使用ExecutorService.Cal ...

  5. 【mybatis】mybatis数据源源码剖析（JNDI、POOLED、UNPOOLED）

    一.概述 二.创建 mybatis数据源的创建过程稍微有些曲折. 1. 数据源的创建过程: 2. mybatis支持哪些数据源,也就是dataSource标签的type属性可以写哪些合法的参数? 弄清 ...

  6. 什么是JavaScript框架-------share

    摘要:现代网站和web应用程序趋向于依赖客户端的大量的javascript来提供丰富的交互.特别是通过不刷新页面的异步请求来返回数据或从服务器端的脚本(或数据系统)中得到响应.在这篇文章中,你将会了解 ...

  7. 3. COLLATIONS

    3. COLLATIONS 表COLLATIONS提供有关每个字符集排序规则的信息.下表中SHOW Name对应SHOW COLLATION. INFORMATION_SCHEMA Name SHOW ...

  8. Go：类型断言

    一.基本介绍 类型断言:由于接口是一般类型,不知道具体类型,如果要转成具体类型,就需要使用类型断言. 如果希望将一个空接口类型重新转换成对应的类型,那么需要使用类型断言,能转换成功是因为这个空接口原先 ...

  9. 页面布局排版-block，inline，float，relative，absolute等

    1.span和div的区别 div是块元素(block),span是行内元素(inline): span什么事也不会做,它存在的目的在与为开发者给它所围绕的元素指定样式.div类似,不过它引入了行分隔 ...

  10. c++_奖券数目

    奖券数目 有些人很迷信数字,比如带“4”的数字,认为和“死”谐音,就觉得不吉利.虽然这些说法纯属无稽之谈,但有时还要迎合大众的需求.某抽奖活动的奖券号码是5位数(10000-99999),要求其中不要 ...