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的事件描述
Sep 08 Javascript
Js 中debug方式
Feb 07 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
react antd实现动态增减表单
Jun 03 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
Javascript 读后台cookie代码
2008/09/15 Javascript
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
Python遍历pandas数据方法总结
2018/02/09 Python
Python学生信息管理系统修改版
2018/03/13 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
python如何保证输入键入数字的方法
2019/08/23 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
计算机专业应届生求职信
2014/04/06 职场文书
校长寄语大全
2014/04/09 职场文书
法制宣传月活动总结
2014/04/29 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js