js实现动态增加文件域表单功能


Posted in Javascript onOctober 22, 2018

本文实例为大家分享了js实现动态增加文件域表单的具体代码,供大家参考,具体内容如下

js实现动态增加文件域表单功能

实现代码:

<html>
<head>
 <title>动态添加表单元素</title>
</head>

<script language="javascript"> 
 //全局变量,代表文件域的个数,并用该变量区分文件域的name属性 
 var file_count = 0;
 //增加文件 域 
 function additem(id) {
  if (file_count > 9) {
   alert("最多10个 ");
   return;
  }
  //定义行变量row;单元格变量cell;单元格内容变量str。 
  var row, cell, str;
  //在指定id的table中插入一行 
  row = eval("document.all[" + '"' + id + '"' + "]").insertRow();
  if (row != null) {
   //设置行的背景颜色 
   row.bgColor = "white";
   //在行中插入单元格 
   cell = row.insertCell();
   //设置str的值,包括一个文件域和一个删除按钮 
   str = '<input onselectstart="return false" class="tf" onpaste="return false" type="file" name="file[' + file_count + ']" style="width:500px" onkeydown="return false;"/>';
   str += " <input type=" + '"' + "button" + '"' + " value=" + '"' + "删除" + '"' + " onclick='deleteitem(this," + '"' + "tb" + '"' + ");'>";
   //文件域个数增加 
   file_count++;
   //设置单元格的innerHTML为str的内容 
   cell.innerHTML = str;
  }
 }
 //删除文件域 
 function deleteitem(obj, id) {
  var rowNum, curRow;
  curRow = obj.parentNode.parentNode;
  rowNum = eval("document.all." + id).rows.length - 1;
  eval("document.all[" + '"' + id + '"' + "]").deleteRow(curRow.rowIndex);
  file_count--;
 } 
</script>

<body>
 <input type=button value="增加" onclick='additem("tb")' /><br/>
 <table cellspacing="0" id="tb" style="width:400px">
 </table>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
jquery 批量上传图片实现代码
Jan 28 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 #Javascript
js实现input密码框显示/隐藏功能
Sep 10 #Javascript
Vue slot用法(小结)
Oct 22 #Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 #Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 #Javascript
vue-cli项目中使用echarts图表实例
Oct 22 #Javascript
vue使用echarts图表的详细方法
Oct 22 #Javascript
You might like
上传多个文件的PHP脚本
2006/11/26 PHP
php class类的用法详细总结
2013/10/17 PHP
php自定义hash函数实例
2015/05/05 PHP
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python字典DICT类型合并详解
2017/08/17 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
Python自定义线程池实现方法分析
2018/02/07 Python
python远程连接MySQL数据库
2019/04/19 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
远程教育心得体会
2014/01/03 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
暑假家长评语大全
2014/04/17 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
python脚本框架webpy模板赋值实现
2021/11/20 Python