javascript實現添加附件功能的方法_javascript技巧

在郵件中我們經常用到添加附件，現在簡單的應用下：
效果圖：

實現原理：
採用table標籤的，主要思想：採用table標籤方式
1、點擊文字之後，就自動建立（原先是自己/建立，現在拿到table對象之後，可以insertRow() insertCell()）建立行和列
2、刪除的時候通過父節點來移除
核心代碼：

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

全部代碼如下（tips：僅僅只是實現添加而已）

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

以上就是本文的全部內容，分享了實現原理、核心代碼、還有大家應該最喜歡的javascript實現添加附件功能的萬丈代碼，希望對大家的學習有所協助。