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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 Javascript
微信小程序实现点击生成随机验证码
Sep 09 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
Bootstrap一款超好用的前端框架
2017/09/25 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
详解Python中for循环是如何工作的
2017/06/30 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
python图形用户接口实例详解
2019/12/16 Python
Python timeit模块的使用实践
2020/01/13 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
为什么相对PHP黑python的更少
2020/06/21 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
C#面试问题
2016/07/29 面试题
医药销售自荐书
2014/05/29 职场文书
美术专业自荐信
2014/07/07 职场文书
化学工程专业求职信
2014/08/10 职场文书
股权转让协议书
2014/12/07 职场文书
2014年终个人总结报告
2015/03/09 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
python的变量和简单数字类型详解
2021/09/15 Python