如下所示：
<table class="exhibit_table" style="font-size:13px; text-align:left;"> <tr> <td style="width:80px;" align="right">上傳計(jì)劃單</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>
希望實(shí)現(xiàn)的功能是：當(dāng)點(diǎn)擊“添加”按鈕時(shí)，在上傳計(jì)劃單的下面再增加一條上傳計(jì)劃單的文件上傳表單，且新增的文件上傳表單后面有一個(gè)“刪除”按鈕，當(dāng)點(diǎn)擊“刪除”按鈕時(shí)，可將剛剛新增的文件上傳表單刪除掉。效果如下圖所示：
點(diǎn)擊“添加”按鈕后，可以新增一個(gè)上傳附件的表單，以及一個(gè)刪除按鈕，效果如下圖所示：
點(diǎn)擊“刪除”按鈕時(shí)，新增的上傳附件表單以及此刪除按鈕，將一并被刪掉，效果如下圖所示：
實(shí)現(xiàn)上面效果的代碼是：給“添加”按鈕上綁定一個(gè)點(diǎn)擊事件：onclick="plusFile()"，當(dāng)點(diǎn)擊“添加”按鈕時(shí)，將觸發(fā)plusFile()函數(shù)。函數(shù)的作用是：首先通過(guò)$("#otherFile")獲取id是otherFile的div，然后通過(guò)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>"); }然后再給“刪除”按鈕綁定一個(gè)點(diǎn)擊事件：onclick='deleteCurrent(this)'，當(dāng)點(diǎn)擊“刪除”按鈕時(shí)，將觸發(fā)deleteCurrent(this)函數(shù)。此函數(shù)的作用是：首先接收this傳遞過(guò)來(lái)的參數(shù)，然后通過(guò)$(obj)獲取“刪除”按鈕所在的對(duì)象，再通過(guò)$(obj).parent()獲取“刪除”按鈕的父元素，即<p>新增的元素，最后通過(guò)jquery的remove()函數(shù)，將此<p>元素刪除掉。
函數(shù)代碼如下所示：
/**********刪除多文件上傳***********/ function deleteCurrent(obj){ $(obj).parent().remove(); } 這樣就完成了上面所希望實(shí)現(xiàn)的功能了。
以上這篇jquery動(dòng)態(tài)添加帶有樣式的HTML標(biāo)簽元素方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
