jquery动态添加带有样式的HTML标签元素方法_jqueryappendhtml - CSDN文库

184 浏览量更新于2023-05-04 评论收藏 60KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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>");

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38690275

粉丝: 7
资源: 972

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈