suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die Funktion zum Hinzufügen von Anhängen in javascript_javascript skills

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

WBOY
WBOYOriginal
2016-05-16 15:31:261881Durchsuche

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

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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So erstellen Sie eine Etikettenkomponente mit jquery easyui_jqueryNächster Artikel：So erstellen Sie eine Etikettenkomponente mit jquery easyui_jquery

In Verbindung stehende Artikel

Mehr sehen