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 相关文章推荐
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
vue键盘事件点击事件加native操作
Jul 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开发中的错误收集,不定期更新。
2011/02/03 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
详解Python中for循环的使用
2015/04/14 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
python去除字符串中的换行符
2017/10/11 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
介绍一下Linux文件的记录形式
2013/09/29 面试题
工程预算与管理应届生求职信
2013/10/06 职场文书
仓库理货员岗位职责
2013/12/18 职场文书
工地门卫岗位职责
2013/12/30 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
医学检验专业自荐信
2014/09/18 职场文书
具结保证书范本
2015/05/11 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS