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. vue-gemini-scrollbar（vue组件-自定义滚动条）

    vue-gemini-scrollbar(vue组件-自定义滚动条) https://segmentfault.com/a/1190000013338560

  2. Ubuntu下编辑并编译运行c++程序

    一.使用vim编辑c++代码: vim hello.cpp 输入如下代码: #include <iostream> using namespace std; int main() { co ...

  3. 浅谈nodejs与npm

    (1)npm介绍 在正式介绍Node.js学习之前,我们先认识一下npm. npm是什么东西?npm其实是Node.js的包管理工具(package manager). 为啥需要一个包管理工具呢?因为 ...

  4. python爬虫---从零开始（一）初识爬虫

    我们开始来谈谈python的爬虫. 1,什么是爬虫: 网络爬虫是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引.模拟程序或者蠕虫.互联网犹如一个大蜘蛛 ...

  5. ssh 带密码私钥 输入密码

    $ssh-agent bash $ssh-add -k ~/.ssh/id_rsa Enter passphrase for /home/ubuntu/.ssh/id_rsa: Identity ad ...

  6. navicate备份与还原数据库

    参考:https://jingyan.baidu.com/article/574c521977dea06c8d9dc1b1.html 1.备份数据库 首先新建数据库 选中数据库下方的“备份”,右击“新 ...

  7. 自定义ngCloak

    场景: 一个非常复杂的表单页面,页面有5个标签,第五个标签中又有5个标签,也就是说一共有9个标签,每个标签中都有一个表单,表单之间相互关联.所有表单项(包括复合的),有80多个数据.全部东西写在一个h ...

  8. Sql按照字段分组，选取其他字段最值所在的行记录

    引言: 为什么会引入这个问题,在程序中遇到这样的问题,在某个数据表中,相同的AID(项目ID)被多次添加到数据表中,所以对应于不同的时间,只想选取添加时间最早的哪一条记录. 参考:红黑联盟 所用到的数 ...

  9. dataTables中固定表头

    dataTables中固定表头 加入  bAutowidth:false, <style> #dayReveiveMoney_payment_list_table_wrapper .dat ...

  10. python蛋疼的编码decode、encode、unicode、str、byte的问题都在这了

    相信很多人和我一样,被python蛋疼的编码问题纠缠不清,比如下面的 私以为出现这种错误的原因还是对一些基本的编解码概念不够熟悉,下面就说说我的理解: 首先python刚出来的时候unicode还没有 ...