jquery fügt HTML-Tags mit Stilen hinzu

Dieses Mal bringe ich Ihnen jquery zum Hinzufügen eines gestalteten HTML-Tags. Was sind die Vorsichtsmaßnahmen für jquery, um ein gestaltetes HTML-Tag hinzuzufügen? aufstehen und einen Blick darauf werfen.

lautet wie folgt:

<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>

Die gewünschte Funktion ist: Wenn auf die Schaltfläche „Hinzufügen“ geklickt wird, wird „Hinzufügen“ hochgeladen ein Datei-Upload-Formular zum Hochladen des Plans unter dem Planblatt, und hinter dem neu hinzugefügten Datei-Upload-Formular befindet sich eine Schaltfläche „Löschen“. Wenn Sie auf die Schaltfläche „Löschen“ klicken, wird das neu hinzugefügte Datei-Upload-Formular angezeigt kann gelöscht werden. Das Datei-Upload-Formular wurde gelöscht.

Nach dem Klicken auf die Schaltfläche „Hinzufügen“ kann ein neues Formular zum Hochladen von Anhängen und eine Schaltfläche zum Löschen hinzugefügt werden.

Nach dem Klicken auf die Schaltfläche „Löschen“ wird ein neues Formular zum Hochladen von Anhängen und hinzugefügt Eine Löschschaltfläche kann hinzugefügt werden.

Der Code zum Erzielen des oben genannten Effekts lautet: Binden Sie ein Klickereignis an die Schaltfläche „Hinzufügen“: onclick="plusFile()", wenn die Schaltfläche „Hinzufügen“ Wenn Sie auf die Schaltfläche klicken, wird die Funktion plusFile () ausgelöst. Die Funktion der Funktion lautet: Erhalten Sie zuerst das p, dessen ID otherFile ist, über $("#otherFile") und fügen Sie dann HTML-Elemente zu diesem p über die Append-Funktion von jquery hinzu. Die hinzuzufügenden HTML-Elemente sind:

<p style=&#39;margin-top:-2px;&#39;>
<input type=&#39;file&#39; name=&#39;file&#39; style=&#39;display:inline; width:180px;&#39;/>
<button type=&#39;button&#39; class=&#39;btn btn-danger btn-xs&#39; style=&#39;border-radius:4px; margin-top:-5px;&#39; onclick=&#39;deleteCurrent(this)&#39;>
<i class=&#39;icon-trash icon-on-right bigger-110&#39;></i>删除
</button>
</p>

Die Funktion ist wie im folgenden Code dargestellt:

/**********添加多文件上传************/
			function plusFile(){
				$("#otherFile").append("<p style=&#39;margin-top:-2px;&#39;><input type=&#39;file&#39; name=&#39;file&#39; style=&#39;display:inline; width:180px;&#39;/><button type=&#39;button&#39; class=&#39;btn btn-danger btn-xs&#39; style=&#39;border-radius:4px; margin-top:-5px;&#39; onclick=&#39;deleteCurrent(this)&#39;><i class=&#39;icon-trash icon-on-right bigger-110&#39;></i>删除</button></p>");
			}

Binden Sie dann ein Klickereignis an die Schaltfläche „Löschen“: onclick='deleteCurrent(this) ', wenn auf die Schaltfläche „Löschen“ geklickt wird. Wann wird die Funktion deleteCurrent(this) ausgelöst. Die Funktion dieser Funktion ist: Zuerst den von dieser übergebenen Parameter empfangen, dann über $(obj) das Objekt abrufen, in dem sich die Schaltfläche „Löschen“ befindet, und dann über $(obj) das übergeordnete Element der Schaltfläche „Löschen“ abrufen. .parent(), d. h. < ;p>Das neu hinzugefügte Element wird schließlich über die Funktion „remove()“ von jquery gelöscht.

Der Funktionscode lautet wie folgt:

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen zahlen Sie bitte Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie jQuery einen Animationseffekt erzeugen kann, der springt, wenn er den Rand des Frames erreicht

Funkdynamik So lösen Sie das Problem des Kontrollauswahlfehlers

So lösen Sie die Inkompatibilität von easyui im ​​IE

Das obige ist der detaillierte Inhalt vonjquery fügt HTML-Tags mit Stilen hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!