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;" οnclick="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> 

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


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


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


实现上面效果的代码是:给“添加”按钮上绑定一个点击事件:οnclick="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;' οnclick='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;' οnclick='deleteCurrent(this)'><i class='icon-trash icon-on-right bigger-110'></i>删除</button></p>");
			}

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

函数代码如下所示:

/**********删除多文件上传***********/
function deleteCurrent(obj){
	$(obj).parent().remove();
}
这样就完成了上面所希望实现的功能了。




  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值