js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)


Posted in Javascript onMarch 26, 2009
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>add_line</title> 
<script language="javascript" type="text/jscript"><!-- function add_input_file(tbfile, index) 
{ 
file_name = "file" + index; 
var tr_file = document.createElement("tr"); 
var td_file = document.createElement("td"); 
var input_file = document.createElement("input") 
input_file.setAttribute("type","file") 
input_file.setAttribute("size","50") 
input_file.setAttribute("name",file_name) 
td_file.appendChild(input_file) 
tr_file.appendChild(td_file) 
tbfile.appendChild(tr_file) 
} 
function add_one_file() 
{ 
var tb_file = document.getElementById("upload_file"); 
var count_file = document.getElementById("upload_file").childNodes.length; 
//window.alert(steps_nums); 
add_input_file(tb_file, count_file); 
} 
// --></script> 
</head> 
<body> 
<div style="text-align: center" style="text-align: center"> 
<form> 
<table width="90%"> 
<tr> 
<td> 
<BR /> 
<BR /> 
<h5>配置文件上传</h5> 
</td> 
</tr> 
<tr> 
<td> 
<table id="upload_file"> 
<tr class="tabletext"> 
<td><input type="file" name="job" size="50"/></td> 
</tr> 
<tr class="tabletext"> 
<td><input type="file" name='file2' size="50"/></td> 
</tr> 
<tr class="tabletext"> 
<td><input type="file" name='file3'size="50"/></td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td align="left"> 
<input type="button" value="新增一行" onclick="add_one_file()"/> 
<input type="submit" value="保 存"/> 
<input name="ciname" value="{{ciname}}"/> 
<input name="type" value="default"/> 
</td> 
</tr> 
</table> 
</form> 
</div> 
</body> 
</html>

把所有代码拷下另存为一个html文件,在浏览器中打开,点击“新增一行”按钮就可以,以下是对js函数的解释

document.createElement 创建一种页面标签
setAttribute:为某一标签设置属性
appendChild:在另一标签中添加一子标签

Javascript 相关文章推荐
基于jquery 的一个progressbar widge
Oct 29 Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
js GridView 实现自动计算操作代码
Mar 25 #Javascript
JAVASCRIPT  THIS详解 面向对象
Mar 25 #Javascript
javascript 打印页面代码
Mar 24 #Javascript
jQuery 全选效果实现代码
Mar 23 #Javascript
利用javascript移动div层-javascript 拖动层
Mar 22 #Javascript
javascript 对象定义方法 简单易学
Mar 22 #Javascript
JS array 数组详解
Mar 22 #Javascript
You might like
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
php读取本地json文件的实例
2018/03/07 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
如何根据业务封装自己的功能组件
2019/04/19 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
pygame实现非图片按钮效果
2019/10/29 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
应届生骨科医生求职信
2013/10/31 职场文书
网络维护中文求职信
2014/01/03 职场文书
单位人事专员介绍信
2014/01/11 职场文书
商场消防演习方案
2014/02/12 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
信用卡工资证明范本
2015/06/19 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏