欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery動態(tài)添加帶有樣式的HTML標簽元素方法

 更新時間：2018年02月24日 08:50:31   作者：sning999  
下面小編就為大家分享一篇jquery動態(tài)添加帶有樣式的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>

希望實現(xiàn)的功能是：當點擊“添加”按鈕時，在上傳計劃單的下面再增加一條上傳計劃單的文件上傳表單，且新增的文件上傳表單后面有一個“刪除”按鈕，當點擊“刪除”按鈕時，可將剛剛新增的文件上傳表單刪除掉。效果如下圖所示：

點擊“添加”按鈕后，可以新增一個上傳附件的表單，以及一個刪除按鈕，效果如下圖所示：

點擊“刪除”按鈕時，新增的上傳附件表單以及此刪除按鈕，將一并被刪掉，效果如下圖所示：

實現(xiàn)上面效果的代碼是：給“添加”按鈕上綁定一個點擊事件：onclick="plusFile()"，當點擊“添加”按鈕時，將觸發(fā)plusFile()函數(shù)。函數(shù)的作用是：首先通過$("#otherFile")獲取id是otherFile的div，然后通過jquery的append函數(shù)，為此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>

函數(shù)如下代碼所示：

/**********添加多文件上傳************/
			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)'，當點擊“刪除”按鈕時，將觸發(fā)deleteCurrent(this)函數(shù)。此函數(shù)的作用是：首先接收this傳遞過來的參數(shù)，然后通過$(obj)獲取“刪除”按鈕所在的對象，再通過$(obj).parent()獲取“刪除”按鈕的父元素，即<p>新增的元素，最后通過jquery的remove()函數(shù)，將此<p>元素刪除掉。

函數(shù)代碼如下所示：

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

這樣就完成了上面所希望實現(xiàn)的功能了。

以上這篇jquery動態(tài)添加帶有樣式的HTML標簽元素方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論