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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
php结合js实现多条件组合查询
May 28 Javascript
React中的Context应用场景分析
Jun 11 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
从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
用PHP和MySQL保存和输出图片
2006/10/09 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
PHP闭包函数详解
2016/02/13 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
python远程连接MySQL数据库
2019/04/19 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
会计专业自荐书
2014/07/08 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
学习作风建设心得体会
2014/10/22 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书