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实现前端分页功能
Mar 23 jQuery
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
js中this用法实例详解
2015/05/05 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
python实现随机漫步方法和原理
2019/06/10 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
总裁秘书岗位职责
2013/12/04 职场文书
结婚邀请函范文
2014/01/14 职场文书
副总经理岗位职责
2014/03/16 职场文书
研讨会主持词
2014/04/02 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
师德师风个人整改措施
2014/10/27 职场文书
公司人事管理制度
2015/08/05 职场文书
小学班主任研修日志
2015/11/13 职场文书
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏