<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
插入目标元素的位置    
    elt.insertBefore(newNode, oldNode);            添加到elt中，child之前。
    注意： elt必须是oldNode的直接父节点。
                                   
    elt.removeChild(child)                    删除指定的子节点
    
    注意： elt必须是child的直接父节点。
    
*/    
    
    
    function addFile(){
        //先要创建一个tr对象
        var trNode = document.createElement("tr");
         //创建td对象
        var tdNode1 =  document.createElement("td");
        var tdNode2 =  document.createElement("td");
        //
        tdNode1.innerHTML ="<input type='file'/>";
        tdNode2.innerHTML = "<a href='#' onclick='delFile(this)' >删除附件</a>";
        //把td的节点添加到tr节点上
        trNode.appendChild(tdNode1);
        trNode.appendChild(tdNode2);
        
        var tbodyNode = document.getElementsByTagName("tbody")[0];
        var lastRow = document.getElementById("lastRow");
        
        tbodyNode.insertBefore(trNode,lastRow);
    }
    
    
    //删除附件
    function delFile(aNode){
        var trNode = aNode.parentNode.parentNode;
        var tbodyNode = document.getElementsByTagName("tbody")[0];
        tbodyNode.removeChild(trNode);
    }

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <table>
        <tr>
            <td><input type="file"/></td><td><a href="#" onclick="delFile(this)" >删除附件</a></td>
        </tr>
        
        <tr id="lastRow">
            <td colspan="2"><input onclick="addFile()" type="button" value="添加附件"/></td>
        </tr>
    </table>
</body>
</html>

HTML增加附件的更多相关文章

  1. javascript之DOM编程增加附件

    在开始这个案例之前,需要学习一下有关于根据子关系节点获取标签的几个方法.罗列如下 /*通过关系(父子关系.兄弟关系)找标签.parentNode 获取当前元素的父节点.childNodes 获取当前元 ...

  2. Maximo子表中增加附件功能

    附件功能的实现(详见ewell.webclient.beans.warranty.WarrantysDateBean ,ewell.webclient.beans.doclinks.custom.Ad ...

  3. Dede CMS如何在文章中增加“附件下载”操作说明

    1.进入后台--在"附件管理"中选择"上传新文件" 2.在"说明标题"输入要上传文件的名字,并在下面浏览找到要上传的文件,保存. 3.在&q ...

  4. 解析大型.NET ERP系统 通用附件管理功能

    大型系统具备一个通用的附件管理功能,对于单据中无法清晰表达的字段,用一个附件图片或附件文档表示是最好的方法了.比如物料清单附加一张CAD图纸,销售订单评审功能中附加客户的各种表格,通用附件功能对系统起 ...

  5. python 发邮件-带附件-文本-html

    #!/usr/bin/python # encoding=utf-8 # Filename: send_email.py from email.mime.image import MIMEImage ...

  6. OAF_文件系列3_实现OAF多行表中附件功能AttachmentImage（案例）

    20150727 Created By BaoXinjian

  7. struts2集成javamail发邮件（带附件）实践记录

    一.代码预览 这两天在做struts2上的邮件发送.以前的项目有用到spring,用spring提供的邮件支持类很方便可以完成这个功能,但是现在只用struts2的话,就碰到了一系列的问题. 代码是从 ...

  8. HTML增加删除邮件（table)

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. EBS OAF中如何在多行表中实现附件功能

    EBS OAF中如何在多行表中实现附件功能 (版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处:否则请与本人联系,违者必究) 在OAF中使用附件功能之前,要先明白Entity( ...

随机推荐

  1. 高数（A）下 第十二章

    12.1 12.2 12.3  12.4 12.5  12.6 自测题

  2. GitHub现VMware虚拟机逃逸EXP，利用三月曝光的CVE-2017-4901漏洞

    今年的Pwn2Own大赛后,VMware近期针对其ESXi.Wordstation和Fusion部分产品发布更新,修复在黑客大赛中揭露的一些高危漏洞.事实上在大赛开始之前VMware就紧急修复了一个编 ...

  3. 集成环信时遇到的问题file not found: libEaseMobClientSDK.a

    集成环信时遇到的问题 build setting环信SDK集成libEaseMobClientSDKL  file not found: libEaseMobClientSDK.a clang: er ...

  4. Effective C++ Item 41 了解隐式接口和编译期多态

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie 经验:class 和 templates 都支持接口和多态. 对 classes 而言接口是 ...

  5. C++MFC编程笔记day01 MFC介绍、创建MFC程序和重写消息处理

    一.MFC概念和作用 1.全称Microsoft Foundation Class Library,我们称为微软基础类库,封闭了绝大部分的win32 Api函数,C++语法中的数据结构,程序的运行流程 ...

  6. for in、for和EnumerateObjectsUsingBlock遍历的区别

    1.对于集合中对象数很多的情况下,for in 的遍历速度非常之快,但小规模的遍历并不明显(还没普通for循环快) 2. 如果在for in 循环里,对这个数组进行了修改的话,无论是增,删,修改数组元 ...

  7. uva 10452 Marcus

    Problem I Marcus, help! Input: standard input Output: standard output Time Limit: 2 Seconds "Fi ...

  8. linux文件系统的权限简单介绍

    linux系统下,文件的权限是这样表示的: - --- --- --- 一共用10位的二进制进行表示,其中 位置 0 :  - :文件        d :目录剩下的9个位置:位置1-3 当前用户(应 ...

  9. IIS6下PHP配置(转载)

    Windows 2003+IIS6+PHP5.4.10配置PHP支持空间的方法 (2013-01-10 16:48:56)标签: php it php环境 php配置 分类: PHP环境配置简介:一般 ...

  10. Android系统定制----删除系统锁屏功能【转】

    本文转载自:http://blog.csdn.net/morixinguan/article/details/56675914 frameworks/base/packages/SettingsPro ...