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 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
JavaScript Prototype对象
Jan 07 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 Javascript
Vue 实例事件简单示例
Sep 19 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 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
javascript高亮效果的二种实现方法
2008/09/14 Javascript
js 学习笔记(三)
2009/12/29 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
vue多次循环操作示例
2019/02/08 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
python+opencv实现阈值分割
2018/12/26 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
python如何删除文件、目录
2020/06/23 Python
python中random模块详解
2021/03/01 Python
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
幼儿园教研活动方案
2014/01/19 职场文书
差生评语大全
2014/05/04 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
2014年副班长工作总结
2014/12/10 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL