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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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 MYSQL中插入当前时间
2008/04/06 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
PHP在线书签系统分享
2016/01/04 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
python exit出错原因整理
2020/08/31 Python
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
水毁工程实施方案
2014/04/01 职场文书
公司寄语大全
2014/04/10 职场文书
出差报告格式模板
2014/11/06 职场文书
三峡大坝导游词
2015/01/31 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
民政局未婚证明
2015/06/15 职场文书