Maison >interface Web >js tutoriel >Comment implémenter la fonction d'ajout de pièces jointes dans les compétences javascript_javascript

Comment implémenter la fonction d'ajout de pièces jointes dans les compétences javascript_javascript

WBOYoriginal: 2016-05-16 15:31:261900parcourir

Nous utilisons souvent l'ajout de pièces jointes dans les e-mails, maintenant nous pouvons simplement l'appliquer :
Rendu :

Principe de mise en œuvre :
L'idée principale de l'utilisation des balises de table : utiliser les balises de table
1. Après avoir cliqué sur le texte, il sera automatiquement créé (à l'origine il a été créé par vous-même/, maintenant après avoir obtenu l'objet table, vous pouvez insertRow() insertCell()) pour créer des lignes et des colonnes
2. Lors de la suppression, supprimez-le via le nœud parent
Code de base :

function creatMail(){ 
   var tab=document.getElementById("tabid"); 
   var tr=tab.insertRow();//插入一行 
   var td=tr.insertCell();//插入一列 
   var td2=tr.insertCell();//插入一列 
   td.innerHTML="<input type='file' value='选择文件'/> "; 
   /* 
 
   td2.innerHTML="<a href='javascript:void(0)' onclick='Delrows(this)'>删除</a>"; 
 */ 
   td2.innerHTML="<img src='11.jpg' alt='删除' onclick='Delrows(this)'>"; 
 
  }

L'intégralité du code est le suivant (conseils : il suffit de l'ajouter)

<!DOCTYPE html> 
<html> 
 <head> 
 <!--主要思想：采用table标签方式 
  1,点击文字之后，就自动创建（原先是自己/创建，现在拿到table对象之后，可以insertRow() insertCell()）创建行和列 
  2，删除的时候通过父节点来移除 
 --> 
  
 <title>AddMail.html</title> 
  
 <link rel="stylesheet" type="text/css" href="1.css"> 
 <script type="text/javascript"> 
  function creatMail(){ 
   var tab=document.getElementById("tabid"); 
   var tr=tab.insertRow();//插入一行 
   var td=tr.insertCell();//插入一列 
   var td2=tr.insertCell();//插入一列 
   td.innerHTML="<input type='file' value='选择文件'/> "; 
   /* 
 
   td2.innerHTML="<a href='javascript:void(0)' onclick='Delrows(this)'>删除</a>"; 
 */ 
   td2.innerHTML="<img src='11.jpg' alt='删除' onclick='Delrows(this)'>"; 
 
  } 
   
  function Delrows(node){//当前对象是<a>里面 
    
   var tr=node.parentNode.parentNode;//tr对象 
   tr.parentNode.removeChild(tr);//tr的父对象table移除子节点 
  } 
 </script> 
 </head> 
 
 <body> 
 <table id="tabid"> 
 <tr> 
  <td><a href="javascript:void(0)" onclick="creatMail()">添加附件</a></td> 
 </tr> 
  
 </table> 
 </body> 
</html>

Ce qui précède représente l'intégralité du contenu de cet article. Il partage le principe d'implémentation, le code de base et le code JavaScript préféré de tous pour implémenter la fonction de pièce jointe. J'espère que cela sera utile à l'apprentissage de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer un composant d'étiquette en utilisant jquery easyui_jqueryArticle suivant：Comment créer un composant d'étiquette en utilisant jquery easyui_jquery

Articles Liés

Voir plus