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

目录
相关文章
|
5天前
|
存储 安全 网络安全
云计算与网络安全:技术融合的未来之路
【10月更文挑战第30天】在数字化浪潮的推动下,云计算已成为企业信息技术架构的核心。然而,随之而来的网络安全问题也日益凸显。本文将探讨云计算与网络安全的关系,分析云服务中的安全挑战,并提出相应的解决方案。我们将通过实例展示如何在云计算环境中实现网络安全的最佳实践,以期为读者提供一条技术融合的未来之路。
|
2天前
|
供应链 安全 网络安全
区块链技术与网络安全:机遇与挑战
区块链技术与网络安全:机遇与挑战
14 2
|
3天前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
15 3
|
6天前
|
存储 安全 网络安全
云计算与网络安全:技术融合的双刃剑
【10月更文挑战第28天】本文旨在探索云计算在提供便利和效率的同时,如何成为网络安全领域的一大挑战。我们将从云服务的基本架构出发,分析其在信息安全中的关键作用,进而讨论当前网络安全面临的主要威胁及防御策略。文章还将探讨云计算环境中的数据保护、身份验证和访问控制机制,以及如何通过加密技术和安全协议来增强安全性。最后,我们将展望未来云计算与网络安全的发展趋势,并思考如何平衡技术创新与安全需求。
|
3天前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些
HTML5与神经网络技术的结合有哪些
14 2
|
4天前
|
存储 安全 网络安全
云计算与网络安全:技术融合的新篇章
【10月更文挑战第31天】本文将深入探讨云计算与网络安全之间的紧密联系,揭示云服务在信息安全领域的关键作用。文章将通过分析网络安全的挑战、云服务的机遇以及信息安全的未来趋势,为读者提供一个全面的视角。同时,文章还将展示如何通过实际的技术手段和策略来增强云计算环境下的安全性。
12 1
|
4天前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块,包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念,还推荐了相关博文供深入学习。特别强调了express模块的使用,包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案,并总结了一些通用设置。适合Node.js初学者参考学习。
16 1
|
6天前
|
存储 安全 网络安全
云计算与网络安全:探索云服务中的信息安全技术
【10月更文挑战第29天】在数字化时代的浪潮中,云计算作为一种革命性的技术,正日益成为企业和个人数据存储与处理的首选方案。然而,随之而来的网络安全问题也愈发复杂和严峻。本文将深入探讨云计算服务中的网络安全挑战,并分析如何通过先进的信息安全技术来加强保护措施。我们将从云服务的基础知识出发,逐步深入到网络安全的各个方面,包括数据加密、身份验证、访问控制等关键技术的应用。通过理论与实践的结合,旨在为读者提供一套全面而实用的云计算安全指南。
|
9天前
|
运维 安全 5G
|
10天前
|
编解码 安全 Linux
网络空间安全之一个WH的超前沿全栈技术深入学习之路(10-2):保姆级别教会你如何搭建白帽黑客渗透测试系统环境Kali——Liinux-Debian:就怕你学成黑客啦!)作者——LJS
保姆级别教会你如何搭建白帽黑客渗透测试系统环境Kali以及常见的报错及对应解决方案、常用Kali功能简便化以及详解如何具体实现