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获取图片长和宽度的代码
Nov 24 Javascript
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
详解package.json版本号规则
Aug 01 Javascript
js实现带搜索功能的下拉框
Jan 11 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 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作的文本留言本的例子(六)
2006/10/09 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
php学习之 数组声明
2011/06/09 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
js编写简易的计算器
2020/07/29 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
python对象及面向对象技术详解
2016/07/19 Python
Python 性能优化技巧总结
2016/11/01 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
python开根号实例讲解
2020/08/30 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
浅谈css3中的前缀
2016/07/20 HTML / CSS
亿企通软件测试面试题
2012/04/10 面试题
电子装配专业毕业生求职信
2014/04/23 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
学生逃课检讨书
2015/02/17 职场文书
人事任命通知书
2015/04/21 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
岁月神偷观后感
2015/06/11 职场文书
2016年端午节寄语
2015/12/04 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL