编程 Javascript

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 相关文章推荐

jquery实现弹出窗口效果的实例代码

Nov 28 Javascript

jQuery实现DIV层淡入淡出拖动特效的方法

Feb 13 Javascript

jQuery结合CSS制作漂亮的select下拉菜单

May 03 Javascript

jquery实现的动态回到顶部特效代码

Oct 28 Javascript

JS模态窗口返回值兼容问题的完美解决方法

May 28 Javascript

jQuery.Callbacks()回调函数队列用法详解

Jun 14 Javascript

ES6新特性之解构、参数、模块和记号用法示例

Apr 01 Javascript

详解angular笔记路由之angular-router

Sep 12 Javascript

微信小程序实现动态设置页面标题的方法【附源码下载】

Nov 29 Javascript

完美解决手机网页中输入框被输入法遮挡的问题

Dec 19 Javascript

node.js使用http模块创建服务器和客户端完整示例

Feb 10 Javascript

vue ref如何获取子组件属性值

Mar 31 Vue.js

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