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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
javascript实现自由编辑图片代码详解
Jun 21 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 Javascript
vue全局使用axios的操作
Sep 08 Javascript
JS前端基于canvas给图片添加水印
Nov 11 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
图形数字验证代码
2006/10/09 PHP
第五章 php数组操作
2011/12/30 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
php的4种常见运行方式
2015/03/20 PHP
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
bootstrap table实例详解
2017/01/06 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
深入解析Python中的WSGI接口
2015/05/11 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
大学生求职简历的自我评价
2013/10/21 职场文书
应届生护士求职信
2013/11/01 职场文书
总经理办公室主任岗位职责
2013/11/12 职场文书
安全生产检查通报
2014/01/29 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
求职教师自荐书
2014/06/19 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
小学教学工作总结2015
2015/05/13 职场文书
紧急迫降观后感
2015/06/15 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
python异常中else的实例用法
2021/06/15 Python