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

 更新时间:2018年02月24日 08:50:31   作者:sning999  
下面小编就为大家分享一篇jquery动态添加带有样式的HTML标签元素方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

<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> 

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

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

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

实现上面效果的代码是:给“添加”按钮上绑定一个点击事件: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 CSS3自定义美化Checkbox实现代码

    jQuery CSS3自定义美化Checkbox实现代码

    这篇文章主要为大家详细介绍了jQuery CSS3自定义美化Checkbox实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • jQuery中的常用事件总结

    jQuery中的常用事件总结

    jquery中一些事件函数使用小结,需要的朋友可以参考下。
    2009-12-12
  • jQuery+Ajax实现无刷新分页

    jQuery+Ajax实现无刷新分页

    这篇文章主要介绍了jQuery+Ajax实现无刷新分页,本文使用的生成分页的工具条是jquery.pagination.js,感兴趣的小伙伴们可以参考一下
    2015-10-10
  • jQuery简易图片放大特效示例代码

    jQuery简易图片放大特效示例代码

    这篇文章主要介绍了通过jQuery实现的简易图片放大特效,需要的朋友可以参考下
    2014-06-06
  • jQuery晃动层特效实现方法

    jQuery晃动层特效实现方法

    这篇文章主要介绍了jQuery晃动层特效实现方法,实例分析了animate方法与css样式的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 基于jQuery实现瀑布流页面

    基于jQuery实现瀑布流页面

    这篇文章主要为大家详细介绍了基于jQuery实现瀑布流页面的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • JS与jQuery实现隔行变色的方法

    JS与jQuery实现隔行变色的方法

    这篇文章主要介绍了JS与jQuery实现隔行变色的方法,结合实例形式对比分析了javascript与jQuery实现隔行变色的具体操作步骤与相关技巧,体验一下jQuery的华丽与简洁,需要的朋友可以参考下
    2016-09-09
  • Jquery 复选框取值兼容FF和IE8(测试有效)

    Jquery 复选框取值兼容FF和IE8(测试有效)

    Jquery 复选框取值的文章网上有很多的,不过可以同时兼容FF和IE8的确实没有几个,下面有个不错的方法经测试有效
    2013-10-10
  • jquery使用EasyUI Tree异步加载JSON数据(生成树)

    jquery使用EasyUI Tree异步加载JSON数据(生成树)

    本篇文章主要介绍了jquery使用EasyUI Tree异步加载JSON数据(生成树),具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-02-02
  • jquery实现表格隔行换色效果

    jquery实现表格隔行换色效果

    下面一个示例为大家详细介绍下使用jquery实现表格的隔行换色功能,感兴趣的朋友可以参考下
    2015-11-11

最新评论