JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件-2

简介: JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件

file组件–添加与删除附件

没有与后台联系的功能哦,只是学下html中的技术

演示代码:

<html>
    <head>
        <title>DHTML技术--file组件--添加与删除附件</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            /*
             a:link  超链接未点击状态。
             a:visited 被访问后的状态。
             a:hover 光标移到超链接上的状态(未点击)。
             a:active 点击超链接时的状态。
             使用顺序: L – V – H – A
            */
            table a:link,table a:visited, img{
                text-decoration:none;
                /*检索或设置对象中的文本的装饰。
                 text-decoration:
                 none  :  默认值。无装饰 
                 blink  :  闪烁 
                 underline  :  下划线 
                 line-through  :  贯穿线 
                 overline  :  上划线 
                 */
                color:#0000ff;
            }
            table a:hover{
                color:#ff0000;
            }
        </style>
        <script type="text/javascript">
            function addFile(){
                var oFileTableNode = document.getElementById("fileTable");
                var oTrNode = oFileTableNode.insertRow();//insertRow 在表格中创建新行(tr),并将行添加到 rows 集合中。 
                var oTdNodeFile = oTrNode.insertCell();//insertCell 在表格行(tr)中创建新单元格,并将单元格添加到 cells 集合中。 
                oTdNodeFile.innerHTML="<input type='file'/>";
                var oTdNodeDel = oTrNode.insertCell();
                //用文字
                //oTdNodeDel.innerHTML="<a href='javascript:void(0)' onclick='deleteFile(this)'>删除附件</a>";
                //用图片---自己找个图片,取名为a.jpg就可以了-或者改代码
                oTdNodeDel.innerHTML="<img src='a.jpg' alt='删除附件' onclick='deleteFile(this)'/>";
            }
            function deleteFile(oANode){
                //a标签的父节点是td,td父节点是tr。
                var oTrNodeDel = oANode.parentNode.parentNode;//TR
                oTrNodeDel.parentNode.removeChild( oTrNodeDel );
            }
        </script>
    </head>
    <body>
        <table id="fileTable">
            <tr>
                <th>
                    <a href="javascript:void(0)" onclick="addFile()">添加附件</a>
                </th>
            </tr>
        <!--点按钮来添加附件,所以不用html,用JavaScript写
            <tr>
                <td><input type="file"/> </td>
                <td> <a href="javascript:void(0)" onclick="deleteFile(this)">删除附件</a> </td>
            </tr>
        -->     
        </table>
    </body>
</html>


360浏览器8.1 演示结果:

image.png

image.png

删除第二行的tr:


image.png

目录
相关文章
|
7天前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
26 1
|
2月前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
2月前
|
JavaScript 前端开发 API
探索后端技术:Node.js的优势和实际应用
【10月更文挑战第6天】 在当今数字化时代,后端开发是任何成功软件应用的关键组成部分。本文将深入探讨一种流行的后端技术——Node.js,通过分析其核心优势和实际应用案例,揭示其在现代软件开发中的重要性和潜力。
136 2
|
2月前
|
移动开发 网络协议 NoSQL
不为人知的网络编程(十七):冰山之下,一次网络请求背后的技术秘密
本文将抛弃千篇一律的计网知识理论,从现实的互联网技术实践角度,一步步为你分享一次网络请求背后的技术秘密。
51 0
|
2月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
39 0
|
9天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
21 5
|
21天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
29 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
22天前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块,包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念,还推荐了相关博文供深入学习。特别强调了express模块的使用,包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案,并总结了一些通用设置。适合Node.js初学者参考学习。
33 1
|
2月前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
24 3
|
3月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
101 2
前端JS读取文件内容并展示到页面上