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 相关文章推荐
IE8 中使用加速器(Activities)
May 14 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
vue组件入门知识全梳理
Sep 21 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 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实现猴子选大王问题算法实例
2015/04/20 PHP
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python制作爬虫抓取美女图
2016/01/20 Python
Python中functools模块函数解析
2017/03/12 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python实现k-means算法
2018/02/23 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
Django如何配置mysql数据库
2018/05/04 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
python框架中flask知识点总结
2018/08/17 Python
python实现ip代理池功能示例
2019/07/05 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
如何让python的运行速度得到提升
2020/07/08 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
J2EE相关知识面试题
2013/08/26 面试题
委托书的写法
2014/09/16 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript
MongoDB支持的数据类型
2022/04/11 MongoDB