jquery動態(tài)添加帶有樣式的HTML標(biāo)簽元素方法
如下所示：
<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ù)的作用是：首先通過$("#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>");
}
然后再給“刪除”按鈕綁定一個(gè)點(diǎn)擊事件：onclick='deleteCurrent(this)'，當(dāng)點(diǎn)擊“刪除”按鈕時(shí)，將觸發(fā)deleteCurrent(this)函數(shù)。此函數(shù)的作用是：首先接收this傳遞過來的參數(shù)，然后通過$(obj)獲取“刪除”按鈕所在的對象，再通過$(obj).parent()獲取“刪除”按鈕的父元素，即<p>新增的元素，最后通過jquery的remove()函數(shù)，將此<p>元素刪除掉。
函數(shù)代碼如下所示：
/**********刪除多文件上傳***********/
function deleteCurrent(obj){
$(obj).parent().remove();
}
這樣就完成了上面所希望實(shí)現(xiàn)的功能了。
以上這篇jquery動態(tài)添加帶有樣式的HTML標(biāo)簽元素方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- jQuery使用append在html元素后同時(shí)添加多項(xiàng)內(nèi)容的方法
- jquery html動態(tài)添加的元素綁定事件詳解
- jQuery 刪除或是清空某個(gè)HTML元素示例
- JQuery給元素添加/刪除節(jié)點(diǎn)比如select
- Jquery顯示、隱藏元素以及添加刪除樣式
- jQuery動態(tài)添加、刪除元素的方法
- Jquery動態(tài)添加及刪除頁面節(jié)點(diǎn)元素示例代碼
- jQuery添加刪除DOM元素方法詳解
- JQuery實(shí)現(xiàn)ul中添加LI和刪除指定的Li元素功能完整示例
- jQuery動態(tài)添加及刪除表單上傳元素的方法(附demo源碼下載)
- jquery html添加元素/刪除元素操作實(shí)例詳解
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Jquery實(shí)現(xiàn)異步上傳文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
jquery網(wǎng)頁日歷顯示控件calendar3.1使用詳解
這篇文章主要為大家詳細(xì)介紹了jquery網(wǎng)頁日歷顯示控件calendar3.1使用,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
開發(fā)網(wǎng)站少不了要經(jīng)常用彈出窗口的形式，今天在網(wǎng)上搜了個(gè)小插件LeanModal，記錄于此，方便自己，亦方便他人使用2012-03-03
jQuery中判斷一個(gè)元素是否為另一個(gè)元素的子元素(或者其本身)
寫了比較簡單的jQuery判斷一個(gè)元素是否為另一個(gè)元素的子元素(或者其本身)的兩個(gè)擴(kuò)展2012-03-03
jQuery扁平化風(fēng)格下拉框美化插件FancySelect使用指南
這篇文章主要介紹了jQuery扁平化風(fēng)格下拉框美化插件FancySelect使用指南,需要的朋友可以參考下2015-02-02
用JQUERY實(shí)現(xiàn)全選和取消全選,減少了我們寫JS的麻煩,我們再也不用寫那么多代碼了,給大家分享兩段代碼,用JQUERY實(shí)現(xiàn)復(fù)選框的全選和取消全選.2008-08-08
Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法
這篇文章主要介紹了Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
jQuery創(chuàng)建自己的插件(自定義插件)的方法
在該系列之前的文章使用 jQuery：UI 項(xiàng)目中，我介紹了使用 jQuery 代碼中的插件來提高 web 應(yīng)用程序的效率。2010-06-06
jQuery EasyUI中的日期控件DateBox修改方法
下面小編就為大家?guī)硪黄猨Query EasyUI中的日期控件DateBox修改方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
jQuery仿淘寶網(wǎng)產(chǎn)品品牌隱藏與顯示效果
這篇文章主要介紹了jQuery仿淘寶網(wǎng)產(chǎn)品品牌隱藏與顯示效果,通過jquery鼠標(biāo)事件實(shí)現(xiàn)頁面元素的顯示與隱藏功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09