使用JavaScript动态的添加组件
使用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的方式可以优化用户体验，减轻服务器端的压力
- 高效快速
缺点：
- 不能防止用户恶意使用
- 不能应对所有复杂的文件上传处理
使用JavaScript动态的添加组件的更多相关文章
- JavaScript动态修改html组件form的action属性
用javaScript动态修改html组件form的action属性,可以在提交时再决定处理表单的页面. <%--JavaScript部分--%><script language=& ...
- javascript 动态脚本添加
异步加载js文件或者异步加载js模块,支持所有浏览器,包括IE,参考至javascript高级编程 1.createScript方法用于创建一个script标签并添加到body标签中 2.create ...
- vue2.0动态添加组件
方法一.<template> <input type="text" v-model='componentName'> <button @click=' ...
- easyui 动态添加组件 要重新渲染
做项目时动态添加组件是常有的事,easyui动态添加组件时样式会失效,这是因为这个组件没有经过 easyui的解析器解析, 比如: <pre name="code" cl ...
- 用Javascript动态添加删除HTML元素实例 (转载)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【javascript 动态添加数据到 HTML 页面】
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...
- Angular使用总结 --- 通过指令动态添加组件
之前自己写的公共组件,都是会先引入,需要调起的时候再通过service控制公共组件状态.值.回调函数什么的.但是有一些场景不适合这种方式,还是动态添加组件更加好.通过写过的一个小组件来总结下. 创建组 ...
- 转： javascript动态添加、修改、删除对象的属性和方法
在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...
- javascript动态添加、修改、删除对象的属性与方法
在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...
随机推荐
- React 深入系列４：组件的生命周期
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列4:组件的生命周期 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助 ...
- Vue2学习（2）
按键修饰符 还可以自定义按键修饰符别名,通过全局 config.keyCodes 对象设置: // 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 ...
- Splay讲解
Splay讲解 Splay是平衡树的一种,是一种二叉搜索树,我们先讲解一下它的核心部分. Splay的核心部分就是splay,可能有些人会说什么鬼?这样讲解是不是太不认真了?两个字回答:不是.第一个S ...
- JVM回收方法区内存
很多人认为方法区(或者HotSpot虚拟机中的永久代)是没有垃圾收集的,Java虚拟机规范中确实说过可以不要求虚拟机在方法区实现垃圾收集,而且在方法区进行垃圾收集的“性价比”一般比较低:在堆中,尤其是 ...
- java中什么是序列化和反序列化
序列化:能够把一个对象用二进制的表示出来. 类似我第一个字节表示什么属性名词,第二个字节表示什么属性值,第几个字段表示有几个属性等. 而且这个二进制可以写到硬盘或者在网络上传输但不会破坏他的结构.一般 ...
- angular+ionic前后端分离开发项目中的使用
Ionic基于AngularJS构建而成,所以学习一些AngularJS的知识很有必要.Ionic并没有独立开发一套完整的Web应用框架,而是对AngularJS进行了扩展,给它添加了大量界面组件和其 ...
- 数据结构之Treap
1. 概述 同splay tree一样,treap也是一个平衡二叉树,不过Treap会记录一个额外的数据,即优先级.Treap在以关键码构成二叉搜索树的同时,还按优先级来满足堆的性质.因而,Treap ...
- python类(class)中参数self的解释说明
python类(class)中参数self的简单解释 1.self只有在类的方法中才会有,其他函数或方法是不必带self的. 2.在调用时不必传入相应的参数.3.在类的方法中(如__init__),第 ...
- python学习之路前端-JavaScript
JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...
- vim 基本命令入门
简介 vim是Linux 系统下类似于Windows的记事本的编辑器. vim 中经常使用的三种模式 一般模式:浏览文件内容. 插入模式:编辑文件内容. 底行模式:进行保存编辑内容,退出等操作. 基本 ...