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 动画基础教程
Dec 25 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
js+css实现扇形导航效果
Aug 18 Javascript
浅析JavaScript中的变量提升
Jun 01 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闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
python队列Queue的详解
2019/05/10 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
np.random.seed() 的使用详解
2020/01/14 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
python线性插值解析
2020/07/05 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
畜牧兽医本科生的自我评价
2014/03/03 职场文书
员工试用期自我评价
2014/09/18 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
muduo TcpServer模块源码分析
2022/04/26 Redis
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang