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


Posted in Javascript onNovember 18, 2015

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

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

Javascript 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 #Javascript
javascript实现对表格元素进行排序操作
Nov 18 #Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 #Javascript
javascript下拉列表菜单的实现方法
Nov 18 #Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 #Javascript
详解JavaScript中常用的函数类型
Nov 18 #Javascript
JavaScript如何动态创建table表格
Aug 02 #Javascript
You might like
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
Python的Flask框架的简介和安装方法
2015/11/13 Python
python中format()函数的简单使用教程
2018/03/14 Python
python实现数据库跨服务器迁移
2018/04/12 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
工作中的自我评价如何写好
2013/10/28 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
运动会解说词100字
2014/01/31 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
小学综合实践活动总结
2014/07/07 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫