jquery 动态增加,减少input表单的简单方法(必看)


Posted in Javascript onOctober 12, 2016

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表单的简单方法(必看)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
JS实现的雪花飘落特效示例
Dec 03 Javascript
微信小程序 生命周期详解
Oct 12 #Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 #Javascript
Angularjs手动解析表达式($parse)
Oct 12 #Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 #Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 #Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 #Javascript
详解Javascript中的原型OOP
Oct 12 #Javascript
You might like
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
javascript动画浅析
2012/08/30 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
vuex入门最详细整理
2020/03/04 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
python实现统计代码行数的方法
2015/05/22 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
python中怎么表示空值
2020/06/19 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
把富文本的回车转为br标签
2019/08/09 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
毕业生精彩的自我评价分享
2013/10/06 职场文书
社区健康教育实施方案
2014/03/18 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
社团活动总结报告
2014/06/27 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python