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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
Javascript模块模式分析
May 16 Javascript
jquery ready函数源代码研究
Dec 06 Javascript
JSQL 批量图片切换的实现代码
May 05 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
React 父子组件通信的实现方法
Dec 05 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
CodeIgniter视图使用注意事项
2016/01/20 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
用jscript实现新建word文档
2007/06/15 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
python实现高斯投影正反算方式
2020/01/17 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
2014年幼儿园植树节活动方案
2014/03/02 职场文书
超市促销活动方案
2014/03/05 职场文书
法律六进活动方案
2014/03/13 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
初二学生评语大全
2014/12/26 职场文书
民主生活会主持词
2015/07/01 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
执行力心得体会范文
2016/01/11 职场文书