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 删除或是清空某个HTML元素示例
Aug 04 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
简单分析javascript中的函数
Sep 10 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
JS实现网站吸顶条
Jan 08 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中对缓冲区的控制实现代码
2013/09/29 PHP
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
linux 下实现python多版本安装实践
2014/11/18 Python
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python单链表简单实现代码
2016/04/27 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
pandas 空数据处理方法详解
2019/11/02 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
审计工作个人的自我评价
2013/12/25 职场文书
司机职责范本
2014/03/08 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
北京故宫的导游词
2015/01/31 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
公司人事管理制度
2015/08/05 职场文书
PHP新手指南
2021/04/01 PHP
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
Python入门之使用pandas分析excel数据
2021/05/12 Python
常用的Python代码调试工具总结
2021/06/23 Python
代码复现python目标检测yolo3详解预测
2022/05/06 Python