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 相关文章推荐
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
jquery插件实现代码雨特效
Apr 24 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
PHP 和 MySQL 基础教程(四)
2006/10/09 PHP
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
往光标所在位置插入值的js代码
2013/09/22 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
详解vue v-model
2020/08/31 Javascript
简单介绍Python中的round()方法
2015/05/15 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
python代码过长的换行方法
2018/07/19 Python
django的ORM模型的实现原理
2019/03/04 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
详解如何减少python内存的消耗
2019/08/09 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
纪检干部个人对照检查材料
2014/09/23 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
小学教师党员承诺书
2015/04/27 职场文书