jquery中如何動態添加帶有樣式的HTML標簽元素方法

這篇文章主要介紹jquery中如何動態添加帶有樣式的HTML標簽元素方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

如下所示：

<table class="exhibit_table" > 
 
 <tr> 
  <td  align="right">上傳計劃單</td> 
  <td ><input type="file" name="file" />
  <button type="button" class="btn btn-success btn-xs"  onclick="plusFile()">
<i class="icon-plus icon-on-right bigger-110"></i>添加
</button>
</td>   
 </tr> 
 <tr> 
 <td></td>
 <td ><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>");
			}

然后再給“刪除”按鈕綁定一個點擊事件：onclick='deleteCurrent(this)'，當點擊“刪除”按鈕時，將觸發deleteCurrent(this)函數。此函數的作用是：首先接收this傳遞過來的參數，然后通過$(obj)獲取“刪除”按鈕所在的對象，再通過$(obj).parent()獲取“刪除”按鈕的父元素，即<p>新增的元素，最后通過jquery的remove()函數，將此<p>元素刪除掉。

函數代碼如下所示：

/**********刪除多文件上傳***********/ 
function deleteCurrent(obj){ 
 $(obj).parent().remove(); 
}

這樣就完成了上面所希望實現的功能了。

以上是“jquery中如何動態添加帶有樣式的HTML標簽元素方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！