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 相关文章推荐
通过jquery实现tab标签浏览效果
Feb 20 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
vue-router 学习快速入门
Mar 01 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 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/06/23 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
Keras搭建自编码器操作
2020/07/03 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
纽约海:Sea New York
2018/11/04 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
和平主题的演讲稿
2014/01/12 职场文书
安全大检查实施方案
2014/02/22 职场文书
上班离岗检讨书
2014/09/10 职场文书
个人违纪检讨书
2014/09/15 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android