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实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 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
apache配置虚拟主机的方法详解
2013/06/17 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
Django Rest framework权限的详细用法
2019/07/25 Python
python 命令行传入参数实现解析
2019/08/30 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
自荐信需注意事项
2014/01/25 职场文书
给老婆的婚前保证书
2014/02/01 职场文书
挂靠协议书
2015/01/27 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
讲解Python实例练习逆序输出字符串
2022/05/06 Python