JavaScript实现动态增加文件域表单


Posted in Javascript onFebruary 12, 2009

js代码:

<script language="javascript"> 
//全局变量,代表文件域的个数,并用该变量区分文件域的name属性 
var file_count = 0; 
//增加文件 域 
function additem(id) { 
if (file_count > 9) { 
alert("最u22810 10个u25991 件u22495 "); 
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>

html代码:
<input type=button value="增加" onclick='additem("tb")'/><br/> 
<table cellspacing="0" id="tb" style="width:400px"> 
</table>
Javascript 相关文章推荐
关于js类的定义
Jun 28 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
从JavaScript 到 JQuery (1)学习小结
Feb 12 #Javascript
谷歌浏览器 insertCell与appendChild的区别
Feb 12 #Javascript
js 判断 enter 事件
Feb 12 #Javascript
JavaScript 克隆数组最简单的方法
Feb 12 #Javascript
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 #Javascript
JS IE和FF兼容性问题汇总
Feb 09 #Javascript
js获取提交的字符串的字节数
Feb 09 #Javascript
You might like
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
django之常用命令详解
2016/06/30 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
保安拾金不昧表扬信
2014/01/15 职场文书
工商管理专业自荐信
2014/06/03 职场文书
英语专业求职信
2014/07/08 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
个人总结与自我评价
2015/02/14 职场文书
业务员辞职信范文
2015/03/02 职场文书
个人工作年终总结
2015/03/09 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
Python基础之常用库常用方法整理
2021/04/30 Python
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js