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中实现类的方式探讨
Aug 28 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 Javascript
原生js实现表格循环滚动
Nov 24 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设计模式 Delegation(委托模式)
2011/06/26 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
PHP中文编码小技巧
2014/12/25 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
Django自定义认证方式用法示例
2017/06/23 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
应聘自荐信
2013/12/14 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS