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 相关文章推荐
使用正则替换变量
May 05 Javascript
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
编译问题
2006/10/09 PHP
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
详解angular笔记路由之angular-router
2017/09/12 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
vue实现搜索功能
2019/05/28 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
Python学习小技巧之列表项的拼接
2017/05/20 Python
Python 调用Java实例详解
2017/06/02 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
药学专业毕业生求职信
2013/10/20 职场文书
三年大学自我鉴定
2014/01/16 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android
Redis 限流器
2022/05/15 Redis