jQuery实现动态添加、删除按钮及input输入框的方法


Posted in jQuery onApril 27, 2017

本文实例讲述了jQuery实现动态添加、删除按钮及input输入框的方法。分享给大家供大家参考,具体如下:

<html>
<head>
<meta charset="utf-8">
<title>动态创建按钮</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
</head>
<body>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="AddMoreFileBox" class="btn btn-info">添加更多的input输入框</a></span></p>
<div id="InputsWrapper">
<div><input type="text" name="mytext[]" id="field_1" value="Text 1"/><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="removeclass"><input type='button' value='删除'></a></div>
</div>
<script>
$(document).ready(function() {
var MaxInputs    = 8; //maximum input boxes allowed
var InputsWrapper  = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton    = $("#AddMoreFileBox"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added
$(AddButton).click(function (e) //on add input button click
{
    if(x <= MaxInputs) //max input box allowed
    {
      FieldCount++; //text box added increment
      //add input box
      $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="removeclass"><input type="button" value="删除"></a></div>');
      x++; //text box increment
    }
return false;
});
$("body").on("click",".removeclass", function(e){ //user click on remove text
    if( x > 1 ) {
        $(this).parent('div').remove(); //remove text box
        x--; //decrement textbox
    }
return false;
})
});
</script>
</body>
</html>

运行效果图如下:

jQuery实现动态添加、删除按钮及input输入框的方法

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
js和jquery中获取非行间样式
May 05 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 #jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 #jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 #jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 #jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 #jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 #jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 #jQuery
You might like
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
使用python实现生成用户信息
2017/03/20 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
运动会横幅标语
2014/06/17 职场文书
企业宣传语大全
2015/07/13 职场文书
教师节领导致辞
2015/07/29 职场文书
环保建议书作文500字
2015/09/14 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS