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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
JS简单计算器实例
Jan 20 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 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
php5数字型字符串加解密代码
2008/04/24 PHP
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
在Mac OS上搭建Python的开发环境
2015/12/24 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
详解python3中tkinter知识点
2018/06/21 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
员工考核管理制度
2014/02/02 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
教师节标语大全
2014/10/07 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
2015入党自荐书范文
2015/03/05 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js