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 相关文章推荐
基于jquery实现的表格分页实现代码
Jun 21 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
深入理解Javascript中的循环优化
Nov 09 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 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
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
php将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
ubuntu中配置pyqt4环境教程
2017/12/27 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
Python3进制之间的转换代码实例
2019/08/24 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
自荐信范文
2013/12/10 职场文书
秋季运动会活动方案
2014/02/05 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
出差报告格式模板
2014/11/06 职场文书
Oracle笔记
2021/04/05 Oracle
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android