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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
javascript 有用的脚本函数
May 07 Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
koa源码中promise的解读
2018/11/13 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
python实现kNN算法
2017/12/20 Python
python实现简易动态时钟
2018/11/19 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
树莓派升级python的具体步骤
2020/07/05 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
副总经理岗位职责
2014/03/16 职场文书
森林防火宣传标语
2014/06/27 职场文书
生日赠语
2015/06/23 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS