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日程管理控件glDatePicker用法详解
Mar 29 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
JQuery复选框全选效果如何实现
May 08 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 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
js null undefined 空区别说明
2010/06/13 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
用C语言实现文件读写操作
2013/10/27 面试题
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
员工自我鉴定
2013/10/09 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
学校火灾防控方案
2014/06/09 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
文明礼仪主题班会
2015/08/13 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
Python面向对象编程之类的概念
2021/11/01 Python