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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
JQuery性能优化的几点建议
May 14 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 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
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
python 全文检索引擎详解
2017/04/25 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
django fernet fields字段加密实践详解
2019/08/12 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
代理班主任的自我评价
2014/02/04 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
推普周活动总结
2014/08/28 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
检讨书模板大全
2015/05/07 职场文书
地震捐款简报
2015/07/21 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android