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 相关文章推荐
JS 实现双色表格实现代码
Nov 24 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 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
yii2缓存Caching基本用法示例
2016/07/18 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
js 替换
2008/02/19 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
Python实现的双色球生成功能示例
2017/12/18 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
python SocketServer源码深入解读
2019/09/17 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
python如何支持并发方法详解
2020/07/25 Python
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
假释思想汇报范文
2014/10/11 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
2014年食堂工作总结
2014/11/20 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
go设置多个GOPATH的方式
2021/05/05 Golang
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
Python 多线程处理任务实例
2021/11/07 Python