您的位置：首页 > Web前端 > JavaScript

使用JavaScript动态的添加组件

2016-02-10 22:25 645 查看

使用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的方式可以优化用户体验，减轻服务器端的压力

- 高效快速

缺点：

- 不能防止用户恶意使用

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航