使用JavaScript动态的添加组件

简介: 使用JavaScript进行动态的网页窗体组件的添加是一件很方便也很容易实现的事情。话不多说,边看代码边做解释吧。准备工作由于html页面中不可以添加java代码,所以我在jsp页面中进行了测试。

使用JavaScript进行动态的网页窗体组件的添加是一件很方便也很容易实现的事情。话不多说,边看代码边做解释吧。

准备工作


  • 由于html页面中不可以添加java代码,所以我在jsp页面中进行了测试。
  • 添加的窗体是作为一个子窗体嵌套在外层窗体组件中的,优点在于方便整体的删除和修改操作
  • 注意为添加的窗体组件添加name属性。

代码展示


<html>
<title>动态添加表单输入项的测试</title>
<head></head>
<script type="text/javascript">
    function addfile(){
        var files = document.getElementById("files");

        var input = document.createElement("input");
        input.type='file';
        input.name='file';

        var btn = document.createElement("input");
        btn.type='button';
        btn.value='删除';
        btn.onclick = function del(){
            this.parentNode.parentNode.removeChild(this.parentNode);
        }

        var div = document.createElement("div");
        div.appendChild(input);
        div.appendChild(btn);

        files.appendChild(div);

    }



</script>
<body>
<table>
    <tr>
        <td>上传用户</td>
        <td>
            <input type="text" name="username">
        </td>
    </tr>
    <tr>
        <td>上传文件</td>
        <td>
            <input type="button" value="添加上传文件" onclick="addfile()">
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <div id="files"></div>
        </td>
    </tr>

</table>


</body>

</html>

PS:

  • 也因为是简单的测试,所以没有进行代码的优化
  • 没有添加java脚本,仅做显示的功能

测试结果


  • 点击“添加上传文件”一次后:

这里写图片描述

  • 点击“添加上传文件”四次后:
    这里写图片描述

  • 点击“删除”后:
    这里写图片描述


小总结


优点:
- 使用js的方式可以优化用户体验,减轻服务器端的压力
- 高效快速
缺点:
- 不能防止用户恶意使用
- 不能应对所有复杂的文件上传处理

目录
相关文章
|
3月前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
145 0
|
26天前
|
JavaScript 前端开发 API
探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
【10月更文挑战第5天】探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
|
2月前
|
Web App开发 JavaScript 前端开发
用 JavaScript 创建 XPCOM 组件
用 JavaScript 创建 XPCOM 组件
|
3月前
|
JavaScript 前端开发 测试技术
[译]: Vue.js 函数式组件:what, why & when?
[译]: Vue.js 函数式组件:what, why & when?
[译]: Vue.js 函数式组件:what, why & when?
|
3月前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
139 0
|
3月前
|
JavaScript 开发者
揭秘Vue.js生命周期钩子:它们是如何掌控组件的生与死?
【8月更文挑战第30天】Vue.js 的生命周期钩子是开发者必须掌握的关键概念,它涵盖了组件从创建、挂载、更新到销毁的整个过程,提供了在特定时机操作DOM、获取数据或执行逻辑的能力。从 `beforeCreate` 到 `unmounted`,每个阶段都有特定的任务:如 `created` 适合异步数据获取,`mounted` 用于DOM操作,而 `beforeUnmount` 则用于清理资源。
24 0
|
3月前
|
JavaScript 前端开发
揭秘Vue.js组件魔法:如何轻松驾驭前端代码,让维护变得轻而易举?
【8月更文挑战第30天】本文探讨了如何利用Vue.js的组件化开发提升前端代码的可维护性。组件化开发将复杂页面拆分为独立、可复用的组件,提高开发效率和代码可维护性。Vue.js支持全局及局部组件注册,并提供了多种组件间通信方式如props、事件等。通过示例展示了组件定义、数据传递及复用组合的方法,强调了组件化开发在实际项目中的重要性。
37 0
|
4月前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
47 1
|
4月前
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
30 0
JS代码动态打印404页面源码
|
4月前
|
JavaScript
js好用的动态分页插件
js好用的动态分页插件是一款简单的分页样式插件,支持样式类型,当前页,每页显示数量,按钮数量,总条数,上一页文字,下一页文字,输入框跳转等功能。
41 1