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 相关文章推荐
用jquery实现点击栏目背景色改变
Dec 10 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
如何使用原生Js实现随机点名详解
Jan 06 Javascript
详解TypeScript的基础类型
Feb 18 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中把对象转换为关联数组代码分享
2015/04/09 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
理解javascript模块化
2016/03/28 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
vue中锚点的三种方法
2018/07/06 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
python默认参数调用方法解析
2020/02/09 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
Python 远程开关机的方法
2020/11/18 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
违纪检讨书2000字
2014/02/08 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
日元符号 ¥
2022/02/17 杂记
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技