javascript实现添加附件功能的方法

2019-11-20 11:14:24

字体：大中小

来源：转载

供稿：网友

在邮件中我们经常用到添加附件，现在简单的应用下：
效果图：

实现原理：
采用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实现添加附件功能的万丈代码，希望对大家的学习有所帮助。

上一篇：JavaScript统计网站访问次数的实现代码

下一篇：Jquery Mobile 自定义按钮图标