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 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
JS实现简易留言板(节点操作)
Mar 16 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 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
isset和empty的区别
2007/01/15 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
js tab 选项卡
2009/04/26 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
python网络编程之读取网站根目录实例
2014/09/30 Python
Python进行数据提取的方法总结
2016/08/22 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python探索之ModelForm代码详解
2017/10/26 Python
解读! Python在人工智能中的作用
2017/11/14 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Python基于当前时间批量创建文件
2020/05/07 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
工程招投标邀请书
2014/01/30 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书