使用JavaScript动态的添加组件

时间：2023-03-09 15:01:59
使用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脚本，仅做显示的功能

测试结果

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

使用JavaScript动态的添加组件

  • 点击“添加上传文件”四次后：

    使用JavaScript动态的添加组件

  • 点击“删除”后：

    使用JavaScript动态的添加组件

小总结

优点：

- 使用js的方式可以优化用户体验，减轻服务器端的压力

- 高效快速

缺点：

- 不能防止用户恶意使用

- 不能应对所有复杂的文件上传处理

相关文章