`

JavaScript添加附件删除附件

 
阅读更多
<!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">
	
	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);

		//获取tbody数组的第一个tbody
		var tbodyNode = document.getElementsByTagName("tbody")[0];
		var lastRow = document.getElementById("lastRow");

//		elt.insertBefore(newNode, oldNode);	//添加到elt中,child之前。
//		注意: elt必须是oldNode的直接父节点。
		tbodyNode.insertBefore(trNode,lastRow);
	}
	
	
	//删除附件
	function delFile(aNode){

		//获取<a>的父节点的父节点
		var trNode = aNode.parentNode.parentNode;

		//获取tbody数组的第一个tbody节点
		var tbodyNode = document.getElementsByTagName("tbody")[0];

//		elt.removeChild(child);//删除指定的子节点
//		注意: elt必须是child的直接父节点。
		tbodyNode.removeChild(trNode);
	}
	

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
	<table border="1" id="tab1">
    	<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>
分享到:
评论

相关推荐

    一款基于JavaScript实现的多附件上传表单添加类库源码及例子程序

    本资源提供了一款基于JavaScript实现的多附件上传表单添加类库的源码和示例程序,这对于开发者来说是一个很好的学习和实践工具。 首先,让我们深入理解JavaScript在多附件上传中的作用。JavaScript是一种客户端脚本...

    【JS常用代码】动态添加附件效果

    在JavaScript(JS)编程中,动态添加附件效果通常是指在网页上通过JavaScript代码实现动态创建、编辑或删除文件上传的功能。这种效果可以让用户在不刷新页面的情况下,方便地添加、预览和管理上传的文件,提高了用户...

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

    根据给定的文件信息,本文将详细介绍如何使用JavaScript实现添加附件功能的知识点。重点内容涵盖了附件功能的实现原理、核心代码的编写,以及具体代码示例的展示。 ### 实现原理 在Web开发中,用户在编辑信息时...

    简单的仿163多附件添加功能

    对于压缩包中的`delete1.gif`,这可能是一个用于删除附件操作的图标,通常会与一个JavaScript函数关联,让用户能够取消已选择的附件。而`addattach.html`可能是实现多附件功能的HTML页面,其中包含上述的`...

    j2ee05,js03,表单验证,级联列表,创建删除节点(添加删除附件),级联列表,对表格增删改查。html和js的帮助文档

    在本压缩包中,我们关注的是“j2EE05”和“js03”的相关技术,主要包括表单验证、级联列表、节点操作(添加删除附件)以及对表格的增删改查功能。这些都是在Web开发中非常关键的元素,尤其是在构建交互性强的Web应用...

    JavaScript API 见附件

    1. DOM API:DOM是HTML和XML文档的结构化表示,JavaScript通过DOM API可以创建、修改、删除和查找页面元素。例如,`document.getElementById()`用于获取ID为特定值的元素,`document.createElement()`用于创建新元素...

    JavaScript源码大全加附件

    JavaScript通过DOM可以操作网页元素,如添加、删除或修改元素,以及改变元素的样式和内容。在这个源码大全中,我们可能会找到关于如何使用JavaScript操作DOM的实例。 三、事件处理 JavaScript通过事件监听器来响应...

    javascript特效代码(最新)

    JavaScript特效的实现通常涉及DOM操作,这包括元素的选择、添加、删除以及属性和样式的变化。例如,使用`getElementById`或`querySelector`选取特定元素,通过`innerHTML`改变元素内容,利用`style`对象修改样式,...

    ASP.NET多附件上传和附件编辑的实现

    2. 删除标志:为每个附件添加一个删除按钮,当用户点击删除时,发送Ajax请求到服务器,确认后从服务器和数据库中移除文件。同时,更新前端的显示列表。 3. 安全考虑:在删除和编辑操作中,务必确保有适当的权限控制...

    ASP.NET 多附件上传实现代码

    ***实现多附件上传的代码涉及到前端JavaScript以及后端的***处理技术,能够实现在网页上动态地添加多个文件上传控件,允许用户上传多个文件。这种实现方式在功能上类似于常见的邮件系统或网盘服务中的多文件上传功能...

    jQuery自定义表单添加删除代码.zip

    本项目“jQuery自定义表单添加删除代码”基于jQuery 1.10.2版本,旨在实现动态地向表单中添加或删除输入元素,以及自定义标题和附件功能,这对于创建灵活的用户交互界面特别有用。以下将详细解析这个项目的重点内容...

    JavaScript中附件预览功能实现详解(推荐)

    在本文中,我们将深入探讨如何在JavaScript中实现附件预览功能,该功能将帮助用户在不下载文件的情况下直接预览图片等类型附件。文章主要分为四个部分来阐述实现这一功能的详细步骤和方法。 ### 一、实现附件预览的...

    domino xpages 上传附件例子

    替换附件通常涉及删除旧附件,然后添加新附件。这个过程同样需要在服务器端处理,确保操作的正确性。 7. **安全考虑**:在处理文件上传时,还需要注意安全问题,例如防止恶意文件上传,限制可接受的文件类型和大小...

    类似QQ邮箱的js附件上传源代码

    这段代码是实现一个类似QQ邮箱的JavaScript附件上传功能的示例。主要知识点包括: 1. **JavaScript事件处理**: - `onchange` 事件:当用户在`&lt;input type="file"&gt;`元素中选择了一个文件后触发。在这个例子中,`...

    批量下载论坛附件的工具

    3. **导入论坛链接**:将论坛帖子列表的URL导入工具,或者手动添加单个帖子链接。 4. **筛选与设置**:根据需求设置筛选条件,选择要下载的附件。 5. **开始下载**:确认无误后,启动下载任务。 需要注意的是,批量...

    树形控件和jquery上传附件

    在IT领域,树形控件和jQuery上传附件是两种常用的功能。树形控件主要用于展示层级关系的数据,而jQuery上传附件则提供了用户友好的文件上传功能。以下将详细阐述这两个知识点。 1. 树形控件(Tree Control) 树形...

    JavascriptDOM编程视频教程(17讲)

    教程名称:Javascript DOM编程视频教程(17讲) 课程目录:【】1.JavascriptDOM编程_在什么位置编写JS代码【】10.JavascriptDOM编程_删除节点【】11.JavascriptDOM编程_添加删除节点的实验...

    程序天下:JavaScript实例自学手册

    19.5 多附件上传效果 19.6 上传控件内容清空 19.7 textarea显示记事本文件的内容 19.8 使用FSO读写文本文件 19.9 自动启动文件下载 19.10 创建Excel文件 19.11 JavaScript导出数据到Excel 19.12 JavaScript读取自身...

    在程序中实现上传附件的代码

    3. **JavaScript处理**:在前端,JavaScript可以用来添加动态的文件输入元素,以及处理文件删除的逻辑。例如,`addPreparativeDoc()`函数用于在页面上添加新的文件输入字段,而`removeFile()`函数则用于删除已选的...

Global site tag (gtag.js) - Google Analytics