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的with语句使用方法
Sep 21 Javascript
学习ExtJS Panel常用方法
Oct 07 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
js浮动图片的动态效果
Jul 10 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 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+DBM的同学录程序(2)
2006/10/09 PHP
利用php获取服务器时间的实现代码
2013/06/07 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
在Python中表示一个对象的方法
2019/06/25 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
介绍一下linux的文件权限
2014/07/20 面试题
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
优秀员工个人的自我评价
2013/11/29 职场文书
自主招生自荐信指南
2014/02/04 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
合作经营协议书范本
2014/04/17 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android