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

前端之家收集整理的这篇文章主要介绍了jquery动态添加带有样式的HTML标签元素方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如下所示:

<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">添加

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

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

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

实现上面效果代码是:给“添加”按钮上绑定一个点击事件:onclick="plusFile()",当点击“添加”按钮时,将触发plusFile()函数函数的作用是:首先通过$("#otherFile")获取id是otherFile的div,然后通过jquery的append函数,为此div添加HTML元素,所要添加的HTML元素为:

函数如下代码所示:

添加多文件上传************/ function plusFile(){ $("#otherFile").append("

"); }

然后再给“删除”按钮绑定一个点击事件:onclick='deleteCurrent(this)',当点击“删除”按钮时,将触发deleteCurrent(this)函数。此函数的作用是:首先接收this传递过来的参数,然后通过$(obj)获取删除”按钮所在的对象,再通过$(obj).parent()获取删除”按钮的父元素,即

新增的元素,最后通过jquery的remove()函数,将此

元素删除掉。

函数代码如下所示:

删除多文件上传***********/ function deleteCurrent(obj){ $(obj).parent().remove(); }

这样就完成了上面所希望实现的功能了。

以上这篇jquery动态添加带有样式的HTML标签元素方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/jquery/33591.html

猜你在找的jQuery相关文章