So implementieren Sie die Funktion zum Hinzufügen von Anhängen in javascript

So implementieren Sie die Funktion zum Hinzufügen von Anhängen in javascript_javascript skills

WBOY

Freigeben： 2016-05-16 15:31:26

Original

1883 Leute haben es durchsucht

Wir verwenden oft das Hinzufügen von Anhängen in E-Mails, jetzt können wir es einfach anwenden:
Rendering:

Umsetzungsprinzip:
Die Hauptidee der Verwendung von Tabellen-Tags: Verwendung von Tabellen-Tags
1. Nachdem Sie auf den Text geklickt haben, wird dieser automatisch erstellt (ursprünglich wurde er von Ihnen selbst erstellt, jetzt können Sie nach Erhalt des Tabellenobjekts mit insertRow() insertCell() Zeilen und Spalten erstellen
2. Entfernen Sie es beim Löschen über den übergeordneten Knoten
Kerncode:

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

Nach dem Login kopieren

Der gesamte Code lautet wie folgt (Tipps: Fügen Sie ihn einfach hinzu)

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

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Er teilt das Implementierungsprinzip, den Kerncode und den beliebtesten JavaScript-Code zur Implementierung der Anhangsfunktion.