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+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jquery自定义组件实例详解
Dec 31 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中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
PHP实现简单日历类编写
2020/08/28 PHP
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
Ionic快速安装教程
2016/06/03 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
Python赋值语句后逗号的作用分析
2015/06/08 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
python清理子进程机制剖析
2017/11/23 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
院领导写的就业推荐信
2014/03/09 职场文书
小学班主任寄语大全
2014/04/04 职场文书
体育课课后反思
2014/04/24 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
工程部部长岗位职责
2015/02/12 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers