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 相关文章推荐
js变换显示图片的实例
Apr 16 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
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
php.ini中的request_order推荐设置
2015/05/10 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
js右键菜单效果代码
2007/07/21 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
Python中turtle作图示例
2017/11/15 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
python跨文件使用全局变量的实现
2020/11/17 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
英国办公用品商店:Office Outlet
2018/04/04 全球购物
财务科科长岗位职责
2014/03/10 职场文书
竞选班委演讲稿
2014/04/28 职场文书
亚运会口号
2014/06/20 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
2015年女职工工作总结
2015/05/15 职场文书
白银帝国观后感
2015/06/17 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
导游词之襄阳古城
2019/09/27 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
详解redis分布式锁的这些坑
2021/05/19 Redis
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
详解MindSpore自定义模型损失函数
2021/06/30 Python