<table> <tr> <td>上传计划单</td> <td><input type="file"/> <button type="button"> <i></i>添加 </button> </td> </tr> <tr> <td></td> <td><div></div></td> </tr> </table>
希望实现的功能是：当点击“添加”按钮时，在上传计划单的下面再增加一条上传计划单的文件上传表单，且新增的文件上传表单后面有一个“删除”按钮，当点击“删除”按钮时，可将刚刚新增的文件上传表单删除掉。效果如下图所示：
点击“添加”按钮后，可以新增一个上传附件的表单，以及一个删除按钮，效果如下图所示：
点击“删除”按钮时，新增的上传附件表单以及此删除按钮，将一并被删掉，效果如下图所示：
实现上面效果的代码是：给“添加”按钮上绑定一个点击事件：onclick="plusFile()"，当点击“添加”按钮时，将触发plusFile()函数。函数的作用是：首先通过$("#otherFile")获取id是otherFile的div，然后通过jquery的append函数，为此div添加HTML元素，所要添加的HTML元素为：
<p> <input type='file'/> <button type='button'> <i></i>删除 </button> </p>
函数如下代码所示：
/**********添加多文件上传************/ function plusFile(){ $("#otherFile").append("<p><input type='file'/><button type='button'><i></i>删除</button></p>"); }
然后再给“删除”按钮绑定一个点击事件：onclick='deleteCurrent(this)'，当点击“删除”按钮时，将触发deleteCurrent(this)函数。此函数的作用是：首先接收this传递过来的参数，然后通过$(obj)获取“删除”按钮所在的对象，再通过$(obj).parent()获取“删除”按钮的父元素，即<p>新增的元素，最后通过jquery的remove()函数，将此<p>元素删除掉。
函数代码如下所示：
/**********删除多文件上传***********/ function deleteCurrent(obj){ $(obj).parent().remove(); }
这样就完成了上面所希望实现的功能了。
以上这篇jquery动态添加带有样式的HTML标签元素方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: