使用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动态的添加组件的更多相关文章

  1. JavaScript动态修改html组件form的action属性

    用javaScript动态修改html组件form的action属性,可以在提交时再决定处理表单的页面. <%--JavaScript部分--%><script language=& ...

  2. javascript 动态脚本添加

    异步加载js文件或者异步加载js模块,支持所有浏览器,包括IE,参考至javascript高级编程 1.createScript方法用于创建一个script标签并添加到body标签中 2.create ...

  3. vue2.0动态添加组件

    方法一.<template> <input type="text" v-model='componentName'> <button @click=' ...

  4. easyui 动态添加组件 要重新渲染

    做项目时动态添加组件是常有的事,easyui动态添加组件时样式会失效,这是因为这个组件没有经过 easyui的解析器解析, 比如:   <pre name="code" cl ...

  5. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  7. Angular使用总结 --- 通过指令动态添加组件

    之前自己写的公共组件,都是会先引入,需要调起的时候再通过service控制公共组件状态.值.回调函数什么的.但是有一些场景不适合这种方式,还是动态添加组件更加好.通过写过的一个小组件来总结下. 创建组 ...

  8. 转： javascript动态添加、修改、删除对象的属性和方法

    在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...

  9. javascript动态添加、修改、删除对象的属性与方法

    在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为, ...

随机推荐

  1. 使用VMware Converter Standalone Client进行虚拟机 P2V提示 权限不足，无法连接\\ip\admin$的解决方法集锦

    使用VMware vCenter Converter Standalone Client进行虚拟机 P2V提示 权限不足,无法连接\\ip\admin$的解决方法集锦 步骤一 检查 远程桌面到&quo ...

  2. java线程与进程

    Java线程与进程 进程与线程的关系 进程里面至少有一个线程,进程间的切换会有较大的开销 线程必须依附在进程上,同一进程共享代码和数据空间 多线程的优势 多线程可以达到高效并充分利用cpu 线程使用的 ...

  3. vue拦截器实现统一token，并兼容IE9验证

    项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互.如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活.这里分享使用vue自带拦截器,给每次请求的头 ...

  4. jquery常用函数

    .text() //获得或更改元素文本: .html() //获得或更改元素标签: .val() //获得或更改input值: .css() //获得或更改元素样式: .click() //点击触发事 ...

  5. TP中的AJAX返回ajaxReturn()

    系统支持任何的AJAX类库,Action类提供了ajaxReturn方法用于AJAX调用后返回数据给客户端.并且支持JSON.XML和EVAL三种方式给客户端接受数据,通过配置DEFAULT_AJAX ...

  6. c++ 深入理解数组

    阅读前提:你得知道啥是数组. 本文需要弄清楚的问题如下: 1,数组作为函数参数,传入的是值,还是地址? 2,数组作为函数参数,数组的长度能否确定? 解决如下 1,数组作为函数参数,传入的是地址.因为数 ...

  7. c++ public,protected,private

    基类的私有成员被继承后不可见(优先级最高) 公有继承不改变基类成员属性 保护继承(私有继承)把基类成员变为保护成员(私有成员) public 公开的 protected 受保护的 private 私有 ...

  8. map函数用法详解

    map函数是Python内置的高阶函数,它是一个典型的函数式编程例子.它的参数为: 一个函数function.一个或多个sequence.通过把函数function依次作用在sequence的每个元素 ...

  9. iOS开发-文件管理

    iOS学习笔记(十七)--文件操作(NSFileManager) 浅析 RunLoop 解决EXC_BAD_ACCESS错误的一种方法--NSZombieEnabled iOS开发--Swift篇&a ...

  10. javascript:void(0) 含义

    javascript:void(0) 含义 我们经常会使用到 javascript:void(0) 这样的代码,那么在 JavaScript 中 javascript:void(0) 代表的是什么意思 ...