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

网络编程 2021-07-04 17:33www.168986.cn编程入门

狼蚁网站SEO优化长沙网络推广就为大家分享一篇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-suess btn-xs" style="border-radius:4px; margin-:-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>

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

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

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

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

<p style='margin-:-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-:-5px;' onclick='deleteCurrent(this)'>
<i class='icon-trash icon-on-right bigger-110'></i>删除
</button>
</p>

函数如下代码所示

/添加多文件上传/
			function plusFile(){
				$("#otherFile").append("<p style='margin-:-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-:-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标签元素方法就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。

上一篇：javaScript动态添加Li元素的实例下一篇：node.js中fs文件系统目录操作与文件信息操作

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设