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 相关文章推荐
Javascript实现的分页函数
Feb 07 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 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.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
window.dialogArguments 使用说明
2011/04/11 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
Python实现定时任务
2017/02/08 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
详解python中的线程与线程池
2019/05/10 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
Python对象的属性访问过程详解
2020/03/05 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
母亲80寿诞答谢词
2014/01/16 职场文书
爱情保证书范文
2014/02/01 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
幼儿评语大全
2014/04/30 职场文书
2014年质量工作总结
2014/11/22 职场文书