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

目录
相关文章
|
2月前
|
机器学习/深度学习 人工智能 自然语言处理
王耀恒:从网络营销老兵到GEO技术布道者
在王耀恒看来,AI时代的技术竞争已从“信息不对称”转向“系统化应用能力”。他的GEO课程体系正是这一理念的体现——技术可以被复制,但深度实践验证的系统框架、认知升级路径和教学转化艺术却构成了难以逾越的壁垒。
|
3月前
|
JavaScript 前端开发 IDE
TypeScript vs. JavaScript:技术对比与核心差异解析
TypeScript 作为 JavaScript 的超集,通过静态类型系统、编译时错误检测和强大的工具链支持,显著提升代码质量与可维护性,尤其适用于中大型项目和团队协作。相较之下,JavaScript 更灵活,适合快速原型开发。本文从类型系统、错误检测、工具支持等多维度对比两者差异,并提供技术选型建议,助力开发者合理选择。
837 1
|
2月前
|
机器学习/深度学习 人工智能 监控
上海拔俗AI软件定制:让技术真正为你所用,拔俗网络这样做
在上海,企业正通过AI软件定制破解通用化难题。该模式以业务场景为核心,量身打造智能解决方案,涵盖场景化模型开发、模块化架构设计与数据闭环优化三大技术维度,推动技术与业务深度融合,助力企业实现高效、可持续的数字化转型。
|
3月前
|
监控 JavaScript 前端开发
JavaScript加密与解密技术:Hook技术应用案例分析
以上案例展示了如何利用JavaScript Hook技术结合强大且广泛采纳标准化算法(如AES),无缝地集成进Web应用程序以增强通信安全性。此种方法不仅能够确保敏感信息得到有效保护,并且由于它们操作适度透明、无需重构已存在代码基础架构而具备较高实际可行性及易操作性。
205 11
|
3月前
|
监控 前端开发 安全
Netty 高性能网络编程框架技术详解与实践指南
本文档全面介绍 Netty 高性能网络编程框架的核心概念、架构设计和实践应用。作为 Java 领域最优秀的 NIO 框架之一,Netty 提供了异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端。本文将深入探讨其 Reactor 模型、ChannelPipeline、编解码器、内存管理等核心机制,帮助开发者构建高性能的网络应用系统。
263 0
|
5月前
|
监控 算法 安全
基于 C# 基数树算法的网络屏幕监控敏感词检测技术研究
随着数字化办公和网络交互迅猛发展,网络屏幕监控成为信息安全的关键。基数树(Trie Tree)凭借高效的字符串处理能力,在敏感词检测中表现出色。结合C#语言,可构建高时效、高准确率的敏感词识别模块,提升网络安全防护能力。
148 2
|
4月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
994 0
|
7月前
|
机器学习/深度学习 算法 PyTorch
Perforated Backpropagation:神经网络优化的创新技术及PyTorch使用指南
深度学习近年来在多个领域取得了显著进展,但其核心组件——人工神经元和反向传播算法自提出以来鲜有根本性突破。穿孔反向传播(Perforated Backpropagation)技术通过引入“树突”机制,模仿生物神经元的计算能力,实现了对传统神经元的增强。该技术利用基于协方差的损失函数训练树突节点,使其能够识别神经元分类中的异常模式,从而提升整体网络性能。实验表明,该方法不仅可提高模型精度(如BERT模型准确率提升3%-17%),还能实现高效模型压缩(参数减少44%而无性能损失)。这一革新为深度学习的基础构建模块带来了新的可能性,尤其适用于边缘设备和大规模模型优化场景。
357 16
Perforated Backpropagation:神经网络优化的创新技术及PyTorch使用指南
|
7月前
|
调度 Python
探索Python高级并发与网络编程技术。
可以看出,Python的高级并发和网络编程极具挑战,却也饱含乐趣。探索这些技术,你将会发现:它们好比是Python世界的海洋,有穿越风暴的波涛,也有寂静深海的奇妙。开始旅途,探索无尽可能吧!
217 15

热门文章

最新文章