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脚本调试方法小结
Nov 24 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
iview table高度动态设置方法
Mar 14 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
Cocos2d实现刮刮卡效果
Dec 20 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的Yii框架中的日志功能
2016/03/17 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
vue router 传参获取不到的解决方式
2019/11/13 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
Python描述器descriptor详解
2015/02/03 Python
Python使用chardet判断字符编码
2015/05/09 Python
python 网络爬虫初级实现代码
2016/02/27 Python
python数据结构之链表的实例讲解
2017/07/25 Python
pandas中去除指定字符的实例
2018/05/18 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
Django 再谈一谈json序列化
2020/03/16 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
python如何从键盘获取输入实例
2020/06/18 Python
Python 合并拼接字符串的方法
2020/07/28 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
温馨提示标语
2014/06/26 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
高中班主任心得体会
2016/01/07 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL
python语言中pandas字符串分割str.split()函数
2022/08/05 Python