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 相关文章推荐
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 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
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
vue表单自定义校验规则介绍
2018/08/28 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
Python自动重试HTTP连接装饰器
2015/04/28 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
Python中生成ndarray实例讲解
2021/02/22 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
J2EE面试题集锦(附答案)
2013/08/16 面试题
毕业生自我推荐
2013/11/04 职场文书
开学季活动策划方案
2014/02/28 职场文书
大学生党员个人总结
2015/02/13 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
护士医德考评自我评价
2015/03/03 职场文书
签订劳动合同通知书
2015/04/16 职场文书
文明礼仪主题班会
2015/08/13 职场文书