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

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

WBOY

Libérer： 2016-05-16 15:31:26

original

1881 Les gens l'ont consulté

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)'>"; 
 
  }

Copier après la connexion

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>

Copier après la connexion

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.