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中setTimeout的问题解决方法
May 08 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
如何利用js在两个html窗口间通信
Apr 27 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 park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
详解Python中find()方法的使用
2015/05/18 Python
python中的全局变量用法分析
2015/06/09 Python
查看python下OpenCV版本的方法
2018/08/03 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
计算机应用职专应届生求职信
2013/11/12 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
进口业务员岗位职责
2014/04/06 职场文书
经理任命书模板
2014/06/06 职场文书
公司文体活动总结
2015/05/07 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
python多次执行绘制条形图
2022/04/20 Python