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 相关文章推荐
JavaScript this调用规则说明
Mar 08 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
Javascript读写cookie的实例源码
Mar 16 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 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数据到csv文件的方法
2015/03/31 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
详解Python:面向对象编程
2019/04/10 Python
python实现大文本文件分割
2019/07/22 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
简历中自我评价怎么写
2014/02/12 职场文书
运动会稿件300字
2014/02/14 职场文书
写自荐信的注意事项
2014/03/09 职场文书
婚礼主持词开场白
2014/03/13 职场文书
三年级学生评语
2014/04/23 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
JavaScript实现两个数组的交集
2022/03/25 Javascript
Python OpenGL基本配置方式
2022/05/20 Python