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下判断Id是否存在的代码
Jan 06 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
电子商务专业个人的自我评价
2013/12/19 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
国博复兴之路观后感
2015/06/02 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电