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 相关文章推荐
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
在pycharm中开发vue的方法步骤
Mar 04 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
最小化数据传输――在客户端存储数据
2006/10/09 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Python装饰器用法实例总结
2018/02/07 Python
python微信公众号开发简单流程
2018/03/23 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Python reversed函数及使用方法解析
2020/03/17 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
最新自我评价范文
2013/11/16 职场文书
人力资源总监工作说明
2014/03/03 职场文书
促销活动总结
2014/04/28 职场文书
关于长城的导游词
2015/01/30 职场文书
体育教师个人工作总结
2015/02/09 职场文书