jQuery中clone()函数实现表单中增加和减少输入项


Posted in jQuery onMay 13, 2017

之前一直没有深入了解到clone()函数的方法,所以对应表单中增加和减少输入项一直使用如:

var copy_html=$(选择器).html(); 
alert(copy_html);

问题在于得出的copy_html直接是HTML内容代码,未经过object封装,而使用:

var copy_html=$(选择器).clone(); 
alert(copy_html);

得出未object对象类型,若$(选择器)包含了某个触发,如 onclick,如果想copy_html继续沿用onclick方法,只需添加true:clone(true)使用。

直接上图:

jQuery中clone()函数实现表单中增加和减少输入项

点击“+”,拷贝自身,并在自身之前追加:

jQuery中clone()函数实现表单中增加和减少输入项

增加方法:

$(function(){
//增加省份、招生人数

$(".addbtn").click(function(){


var copy_str=$(this).parents(".form-group").clone();


copy_str.find("i").removeClass("fa-plus").addClass("fa-minus");

//将按钮图标“+”,变为“-”




copy_str.find("button").removeClass("addbtn");





 //去除class名“addbtn”,避免新增的输入项沿用此添加方法


copy_str.find("button").attr("onclick","canelf(this)");




//增加点击删除自身触发事件


$(this).parent().parent().parent().before(copy_str);




//追加

});
});
//增加项,删除方法
function canelf(e){

$(e).parent().parent().parent().remove();
}

最后贴上HTML代码:

<div class="form-group">
<label class="control-label col-md-2 col-sm-3 col-xs-3">省份</label>
<div class="col-md-10 col-sm-9 col-xs-9 ">
<div class="col-md-2 col-sm-3 col-xs-3 " style="padding-left:0;">
<select class="form-control input-sm">
<option>全部</option>
<option value="北京">北京市</option>
<option value="浙江省">浙江省</option>
<option value="天津市">天津市</option>
<option value="安徽省">安徽省</option>
<option value="上海市">上海市</option>
<option value="福建省">福建省</option>
<option value="重庆市">重庆市</option>
<option value="江西省">江西省</option>
<option value="山东省">山东省</option>
<option value="河南省">河南省</option>
<option value="湖北省">湖北省</option>
<option value="湖南省">湖南省</option>
<option value="广东省">广东省</option>
<option value="海南省">海南省</option>
<option value="山西省">山西省</option>
<option value="青海省">青海省</option>
<option value="江苏省">江苏省</option>
<option value="辽宁省">辽宁省</option>
<option value="吉林省">吉林省</option>
<option value="台湾省">台湾省</option>
<option value="河北省">河北省</option>
<option value="贵州省">贵州省</option>
<option value="四川省">四川省</option>
<option value="云南省">云南省</option>
<option value="陕西省">陕西省</option>
<option value="甘肃省">甘肃省</option>
<option value="黑龙江省">黑龙江省</option>
<option value="香港特别行政区">香港特别行政区</option>
<option value="澳门特别行政区">澳门特别行政区</option>
<option value="广西壮族自治区">广西壮族自治区</option>
<option value="宁夏回族自治区">宁夏回族自治区</option>
<option value="新疆维吾尔自治区">新疆维吾尔自治区</option>
<option value="内蒙古自治区">内蒙古自治区</option>
<option value="西藏自治区">西藏自治区</option>
</select>
</div>
<div class="col-md-2 col-sm-3 col-xs-3">
<div class='input-group input-group-sm'>
<input type="text" class="form-control" placeholder="计划招生人数" />
<span class="input-group-addon">人
</span>
</div>
</div>
<div class="col-md-1 col-sm-2 col-xs-2">
<button type="button" class="btn btn-primary btn-sm addbtn"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>

以上所述是小编给大家介绍的jQuery中clone()函数实现表单中增加和减少输入项,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 #jQuery
jQuery手风琴的简单制作
May 12 #jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 #jQuery
jQuery遮罩层实例讲解
May 11 #jQuery
jQuery zTree树插件动态加载实例代码
May 11 #jQuery
jQuery实现的简单在线计算器功能
May 11 #jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 #jQuery
You might like
一个php作的文本留言本的例子(四)
2006/10/09 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
jquery延迟对象解析
2016/10/26 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
python代码xml转txt实例
2020/03/10 Python
Python定义一个函数的方法
2020/06/15 Python
计算机软件个人的自荐信范文
2013/12/01 职场文书
中国入世承诺
2014/04/01 职场文书
cf战队收人口号
2014/06/21 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
委托公证书格式
2015/01/26 职场文书
李强感恩观后感
2015/06/17 职场文书
工作态度怎么写
2015/06/25 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
python绘图subplots函数使用模板的示例代码
2021/04/30 Python