jquery ajoute des balises HTML avec des styles

Cette fois, je vais vous proposer jquery pour ajouter une balise HTML stylisée Quelles sont les précautions pour que jquery ajoute une balise HTML stylisée ? levez-vous et jetez un oeil.

est la suivante :

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

La fonction souhaitée est : lorsque l'on clique sur le bouton "Ajouter", télécharger Ajouter un formulaire Téléchargement de fichiers pour télécharger le plan sous la feuille de plan, et il y a un bouton "Supprimer" derrière le formulaire de téléchargement de fichier nouvellement ajouté Lorsque vous cliquez sur le bouton "Supprimer", le formulaire de téléchargement de fichier nouvellement ajouté. peut être supprimé. Le formulaire de téléchargement de fichier a été supprimé.

Après avoir cliqué sur le bouton "Ajouter", un nouveau formulaire pour télécharger les pièces jointes et un bouton de suppression peuvent être ajoutés

Lorsque vous cliquez sur le bouton "Supprimer", un nouveau formulaire pour télécharger les pièces jointes et. un bouton de suppression peut être ajouté. sera supprimé ensemble

Le code pour obtenir l'effet ci-dessus est le suivant : lier un événement de clic au bouton "Ajouter" : onclick="plusFile()", lorsque "Ajouter" est cliqué sur le bouton, plusFile sera déclenché ()fonction. La fonction de la fonction est la suivante : obtenez d'abord le p dont l'identifiant est otherFile via $("#otherFile"), puis ajoutez des éléments HTML à ce p via la fonction append de jquery. Les éléments HTML à ajouter sont :

.

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

La fonction est telle qu'indiquée dans le code suivant :

/**********添加多文件上传************/
			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>");
			}

Ensuite, liez un événement de clic au bouton "Supprimer" : onclick='deleteCurrent(this) ', lorsque l'on clique sur le bouton "Supprimer". Quand, la fonction deleteCurrent(this) sera déclenchée. La fonction de cette fonction est : recevoir d'abord le paramètre passé par ceci, puis obtenir l'objet où se trouve le bouton "Supprimer" via $(obj), puis obtenir l'élément parent du bouton "Supprimer" via $(obj) .parent(), c'est-à-dire < ;p>L'élément nouvellement ajouté est finalement supprimé via la fonction remove() de jquery.

Le code de fonction est le suivant :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Comment jQuery peut créer un effet d'animation qui rebondit lorsqu'il touche le bord du cadre

Dynamique radio Comment résoudre le problème de l'échec de la sélection des contrôles

Comment résoudre l'incompatibilité d'easyui dans IE

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!