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 相关文章推荐
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
js 刷新页面的代码小结 推荐
Apr 02 Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 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
php 冒泡排序 交换排序法
2011/05/10 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
JS模拟多线程
2007/02/07 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python常用列表数据结构小结
2014/08/06 Python
Python CSV模块使用实例
2015/04/09 Python
Python中join和split用法实例
2015/04/14 Python
Python使用pymysql小技巧
2017/06/04 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
python反转列表的三种方式解析
2019/11/08 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
求职推荐信范文
2013/12/01 职场文书
物流仓管员岗位职责
2013/12/04 职场文书
小区门卫岗位职责
2013/12/31 职场文书
求职信模板
2014/05/23 职场文书
会计电算化专业求职信
2014/06/10 职场文书
片区教研活动总结
2014/07/02 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android