這次帶給大家jquery添加帶有樣式的HTML標籤，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;"><p id="otherFile"></p></td> </tr> </table>
希望實現的功能是：當點擊「新增」按鈕時，在上傳計劃單的下面再增加一條上傳計劃單的檔案上傳表單，且新增的檔案上傳表單後面有一個「刪除」按鈕，當點擊「刪除」按鈕時，可將剛剛新增的檔案上傳表單刪除掉。
點擊「新增」按鈕後，可以新增一個上傳附件的表單，以及一個刪除按鈕
#點擊「刪除」按鈕時，新增的上傳附件表單以及此刪除按鈕，將一併被刪掉
實現上面效果的程式碼是：給「新增」按鈕上綁定一個點擊事件：onclick="plusFile()"，點擊「新增」按鈕時，將觸發plusFile ()函數。函數的作用是：先透過$("#otherFile")取得id是otherFile的p，再透過jquery的append函數，為此p加入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>");
}然後再給「刪除」按鈕綁定一個點擊事件：onclick='deleteCurrent(this)'，當點擊「刪除」按鈕時，將觸發deleteCurrent(this)函數。此函數的作用是：先接收this傳遞過來的參數，然後透過$(obj)取得「刪除」按鈕所在的對象，再透過$(obj).parent()取得「刪除」按鈕的父元素，也就是< ;p>新增的元素，最後透過jquery的remove()函數，將此
元素刪除掉。
函數程式碼如下：
/**********删除多文件上传***********/
function deleteCurrent(obj){
$(obj).parent().remove();
}相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是jquery加入帶有樣式的HTML標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！
