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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery Plupload上传插件的使用
Apr 19 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jquery简易手风琴插件的封装
Oct 13 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
PHP编程函数安全篇
2013/01/08 PHP
php递归json类实例
2014/12/02 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
js实现iframe动态调整高度的代码
2008/01/06 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
python在windows下实现备份程序实例
2014/07/04 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
python flask实现分页的示例代码
2018/08/02 Python
python删除字符串中指定字符的方法
2018/08/13 Python
Pytorch to(device)用法
2020/01/08 Python
python db类用法说明
2020/07/07 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
如何手工释放资源
2013/12/15 面试题
银行学习十八大感想
2014/01/11 职场文书
节水倡议书范文
2014/04/15 职场文书
保护环境建议书300字
2014/05/13 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
新学期家长寄语2016
2015/12/03 职场文书
python中取整数的几种方法
2021/11/07 Python
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang