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 相关文章推荐
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
简单实现JS计算器功能
Dec 21 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
vue数组对象排序的实现代码
Jun 20 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
python导入库的具体方法
2020/06/18 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
新加坡交友网站:be2新加坡
2019/04/10 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
JAVA和C++的区别
2013/10/06 面试题
爱国演讲稿500字
2014/05/04 职场文书
白岩松演讲
2014/05/21 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
三方股东合作协议书
2014/10/28 职场文书
教师党员个人总结
2015/02/10 职场文书
初婚初育证明范本
2015/06/18 职场文书
会议营销主持词
2015/07/03 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
python实现简单的聊天小程序
2021/07/07 Python
Java中try catch处理异常示例
2021/12/06 Java/Android
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL