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

javascript 动态调整图片尺寸实现代码

Dec 28 Javascript

解决extjs grid 不随窗口大小自适应的改变问题

Jan 26 Javascript

控制文字内容的显示与隐藏示例

Jun 11 Javascript

jQuery点击按钮弹出遮罩层且内容居中特效

Dec 14 Javascript

学习JavaScript设计模式之策略模式

Jan 12 Javascript

简单几步实现返回顶部效果

Dec 05 Javascript

Bootstrap超大屏幕的实现代码

Mar 22 Javascript

js实现带进度条提示的多视频上传功能

Dec 13 Javascript

jquery动态添加以及遍历option并获取特定样式名称的option方法

Jan 29 jQuery

微信小程序实现多个按钮的颜色状态转换

Feb 15 Javascript

JS实现基本的网页计算器功能示例

Jan 16 Javascript

express异步函数异常捕获示例详解

Nov 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