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 相关文章推荐
js查找父节点的简单方法
Jun 28 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
js实现随机8位验证码
Jul 24 Javascript
微信小程序利用云函数获取手机号码
Dec 17 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 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
继续学习javascript闭包
2015/12/03 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
django项目搭建与Session使用详解
2018/10/10 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
用Python实现职工信息管理系统
2020/12/30 Python
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
编辑找工作求职信范文
2013/12/16 职场文书
12月红领巾广播稿
2014/02/13 职场文书
大学生个人学年总结
2015/02/15 职场文书
自荐信格式范文
2015/03/04 职场文书