js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)_javascript技巧

复制代码 代码如下:

<!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:在另一标签中添加一子标签

时间: 2024-12-03 06:01:37

js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)_javascript技巧的相关文章

用js动态添加html元素,以及属性的简单实例_javascript技巧

用js动态添加html元素,以及属性的简单实例 function test(){ //创建节点 var lswt_2=document.createElement("div"); //设置节点id lswt_2.id='lswtColse'; //设置节点属性 lswt_2.style.width='11px'; lswt_2.style.height='10px'; lswt_2.style.top='0px'; lswt_2.style.right='0px'; lswt_2.st

用JS动态改变表单form里的action值属性的两种方法_javascript技巧

方法1: <form id="form1" name="form1" method="post" action="../news/index.asp"> <table width="100%" height="43" border="0" cellpadding="0" cellspacing="0">

js动态获取子复选项并设计全选及提交的实现方法_javascript技巧

在做项目的时候,会遇到根据父选项,动态的获取子选项,并列出多个复选框,提交时,把选中的合并成一个字符提交后台 本章将讲述如何通过js控制实现该操作: 1:设计父类别为radio,为每一个radio都加上onclick事件,并默认类别1为选择状态. <input type="checkbox" name="selectall" id="selectall" onClick="selectAll();" checked=&q

js改变img标签的src属性在IE下没反应的解决方法_javascript技巧

今天写项目时遇到个图片需要动态改变,例: <img src="images/image01.jpg" id="myImage" /> 然后改变时,使用js脚本: document.getElementById('checkCodeImage').src='images/image02.jpg'; 然后在Chrome FF里都能改变成功,但在IE下却不行,网上搜了半天,大概了解了,这个是IE的一个bug,要想改变src属性成功,可以这么写: documen

js 多种变量定义(对象直接量,数组直接量和函数直接量)_javascript技巧

对象直接量创建一个对象: 复制代码 代码如下: var obj = {x:[1,2],y:23}; 代码跟下面是一样的. 复制代码 代码如下: var obj=new Object(); obj.x=new Array(1,2); obj.y=23; 测试: 复制代码 代码如下: for(var i in obj) alert(obj[i]); 函数直接量:它是一个表达式而不是语句. 复制代码 代码如下: (function(){})() 如下例: 复制代码 代码如下: (function(){

javascript的document中的动态添加标签实现方法_javascript技巧

document的高级篇中提供了节点操作的函数,具体包括:获取节点,改变节点,删除节点,替换节点,创建节点,添加节点,克隆节点等函数.我们可以利用这些函数动态改变html的节点. 1.JavaScript <script type="text/javascript"> function test1(){//对个节点的ID相同时候的情况 var myhref = document.getElementById('same'); window.alert(myhref.inne

JS动态添加选项案例分析_javascript技巧

本文实例分析了JS动态添加选项的方法.分享给大家供大家参考,具体如下: 一.问题: 要做一个调查问卷,问题数量不定,问答答案不定. JS控答案效果图 二.实现方法: 为了实现这个效果,点击那个按钮就在下面添加4个答案框,选择从A-Z这26个字母,就是为了ASSIC码方便处理 看看HTML结果 <table width="100%" class="form"> <tr> <th width="100px"><

js动态添加表格数据使用insertRow和insertCell实现_javascript技巧

效果图: 代码: js动态添加表格数据_2.html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js动态添加表格数据_2

JS动态添加Table的TR,TD实现方法_javascript技巧

本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html>  <head> <title></title> <SCRIPT language="JavaScript"> var tempRow=0; var maxRows=0; function insertRows(){ tempRow=table1.rows.length-1; maxRows=t