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 文本框使用小结
May 22 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
Javascript实现字数统计
Jul 03 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
JS + HTML 罗盘式时钟的实现
May 21 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
一个显示天气预报的程序
2006/10/09 PHP
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
javscript对象原型的一些看法
2010/09/19 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python实现屏幕截图的两种方式
2018/02/05 Python
python中正则表达式的使用方法
2018/02/25 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
Python try except else使用详解
2021/01/12 Python
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
会计学生自我鉴定
2014/02/06 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
教师节获奖感言
2015/07/31 职场文书
升职自荐书
2019/05/09 职场文书