jquery动态添加带有样式的HTML标签元素方法


Posted in jQuery onFebruary 24, 2018

如下所示:

<table class="exhibit_table" style="font-size:13px; text-align:left;"> 
 
 <tr> 
  <td style="width:80px;" align="right">上传计划单</td> 
  <td style="padding:10px;"><input type="file" name="file" style="display:inline; width:180px;"/>
  <button type="button" class="btn btn-success btn-xs" style="border-radius:4px; margin-top:-5px; margin-left:-4px;" onclick="plusFile()">
<i class="icon-plus icon-on-right bigger-110"></i>添加
</button>
</td>   
 </tr> 
 <tr> 
 <td></td>
 <td style="padding:10px;"><div id="otherFile"></div></td>
</tr>
</table>

希望实现的功能是:当点击“添加”按钮时,在上传计划单的下面再增加一条上传计划单的文件上传表单,且新增的文件上传表单后面有一个“删除”按钮,当点击“删除”按钮时,可将刚刚新增的文件上传表单删除掉。效果如下图所示:

jquery动态添加带有样式的HTML标签元素方法

点击“添加”按钮后,可以新增一个上传附件的表单,以及一个删除按钮,效果如下图所示:

jquery动态添加带有样式的HTML标签元素方法

点击“删除”按钮时,新增的上传附件表单以及此删除按钮,将一并被删掉,效果如下图所示:

jquery动态添加带有样式的HTML标签元素方法

实现上面效果的代码是:给“添加”按钮上绑定一个点击事件:onclick="plusFile()",当点击“添加”按钮时,将触发plusFile()函数。函数的作用是:首先通过$("#otherFile")获取id是otherFile的div,然后通过jquery的append函数,为此div添加HTML元素,所要添加的HTML元素为:

<p style='margin-top:-2px;'>
<input type='file' name='file' style='display:inline; width:180px;'/>
<button type='button' class='btn btn-danger btn-xs' style='border-radius:4px; margin-top:-5px;' onclick='deleteCurrent(this)'>
<i class='icon-trash icon-on-right bigger-110'></i>删除
</button>
</p>

函数如下代码所示:

/**********添加多文件上传************/
			function plusFile(){
				$("#otherFile").append("<p style='margin-top:-2px;'><input type='file' name='file' style='display:inline; width:180px;'/><button type='button' class='btn btn-danger btn-xs' style='border-radius:4px; margin-top:-5px;' onclick='deleteCurrent(this)'><i class='icon-trash icon-on-right bigger-110'></i>删除</button></p>");
			}

然后再给“删除”按钮绑定一个点击事件:onclick='deleteCurrent(this)',当点击“删除”按钮时,将触发deleteCurrent(this)函数。此函数的作用是:首先接收this传递过来的参数,然后通过$(obj)获取“删除”按钮所在的对象,再通过$(obj).parent()获取“删除”按钮的父元素,即<p>新增的元素,最后通过jquery的remove()函数,将此<p>元素删除掉。

函数代码如下所示:

/**********删除多文件上传***********/ 
function deleteCurrent(obj){ 
 $(obj).parent().remove(); 
}

这样就完成了上面所希望实现的功能了。

以上这篇jquery动态添加带有样式的HTML标签元素方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jquery图片放大镜效果
Jun 23 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 #jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 #jQuery
实现jquery放大镜的两种方法
Feb 22 #jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 #jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 #jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 #jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 #jQuery
You might like
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
destoon实现调用热门关键字的方法
2014/07/15 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
php经典算法集锦
2015/11/14 PHP
PHP.vs.JAVA
2016/04/29 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
Python中关于使用模块的基础知识
2015/05/24 Python
Python使用turtule画五角星的方法
2015/07/09 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
毕业生求职简历的自我评价
2013/10/07 职场文书
生物技术毕业生自荐信
2013/10/23 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
优秀医生事迹材料
2014/02/12 职场文书
教师师德承诺书
2014/03/26 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
压缩Redis里的字符串大对象操作
2021/06/23 Redis
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL