js脚本js动态增加删除行_百度知道
js脚本js动态增加删除行
提问者采纳
& name=&1&&16%&div align=&;option&return doSubmit(this)&quot.parentEbody class=&
&&
&td&/table& onclick=&&; cellspacing=&quot.cloneNode(true);& class=&& value=&0& width=&&checkbox&pid& &table border=&input type=&点击checkbox时;/&quot. style=&quot.parentE
&lt,用于克隆的行 end --&/删除一行if(iIndex==-99999){
alert(&quot：&tbody id=&quot.parentElement：没有选中行号; cellspacing=&quot，在写过多种方案后;POST&900& width=&td width=&1&/
&/
&
iIndex==-99999;ACE_HIDDEN_TABLE&quot!-- 隐藏table!-- 插入新行的区域 begin --&&text&&quot.rows[0];&0&&}else{newTB;&/);/&title&gt.all(&quot!-- 隐藏&lt，最终整理出这个最为方便应用的方案;&tbody&//&&lt。
所做过的多个项目中均用到js动态添加删除行的应用;JavaScript&quot!-- 插入新行的区域 end --&
&
DelRow(cGetRow);/ cellpadding=&&&
& /html& cellpadding=&/&
function insertrow(){
var newrow =result&quot.event：以下是DEMO全部代码;;
&tbody id=& style=&//1&td&/option value=&quot.ACE_HIDDEN_TABLE;GetRow()&select&td&姓名&
&&option&&#47，rowIndex是TR的属性
/0&
&tr&gt，很实用;获得行索引
/16%&script language=& onSubmit=&/option value=&人员编号&&/
&ltjs动态增加删除行代码;两个parentElement分别是TD和TR;table&tr&/dialog_body&将rowIndex恢复默认值;input id=& /系统提示;&table&&#47:10form method=&
&& &0&quot!&
&lt.parentEhead&);/newTB&&quot.rowItbody&gt。}function DelRow(iIndex){/script&/true&/&0&quot，直接删除行;newTB&&
var cGetRow=-99999;option value=&td width=&900&& readonly=&/&&right&quot.deleteRow(iIndex);/&&gt.srcE&table border=&;添加刚才克隆的一行}function GetRow(){
&#47。}}&table&gt.rowIndex
cGetRow=克隆一行
/&Ace Test& type=&&/td&&lt,用于克隆的行 begin --&project&
&&gt:none& class=&option&title&select id=&quot，以备日后拿来便用.appendChild(newrow);head&&gt
其他类似问题
4人觉得有用
为您推荐：
js脚本的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁asp动态添加/删除行，以及提交内容至数据库
&html&&head&&script& function
{ var tbody1
document.getElementByIdx("tbody1");
document.createElement_x("&tr&");
document.createElement_x("&td&");
document.createTextNode("新增的行");
td.appendChild(text); tr.appendChild(td); tbody1.appendChild(tr);
} &/script&&/head&&body&&table id="table1" border=1& &tbody id="tbody1"&&/table&&input type="button" onclick="Add()" value="Add"&&/body&&/html&以上是最简单的版本
language="javascript"&&&
theRowOfTheDynamicTable=&&
& function&&
addRow(the_table)
if(the_table==null)&&
the_row,the_&&
row_index=-1;&&
if(theRowOfTheDynamicTable==null)
theRowOfTheDynamicTable=new&&
Array();&&
baseTr=the_table.rows[0];//插入倒数第二行的内容&&
for(i=0;i&baseTr.cells.i++)
the_cell=baseTr.cells[i];&&
theRowOfTheDynamicTable[i]=the_cell.innerHTML;&&
row_index=the_table.rows.length-1;//在第二行后面插入&&
newrow=the_table.insertRow(row_index);&&
for(i=0;i&theRowOfTheDynamicTable.i++)
the_cell=newrow.insertCell(i);&&
the_cell.align="center";&&
the_cell.className="TdLeftBg";
the_cell.className="classtd";
the_cell.innerHTML=theRowOfTheDynamicTable[i];&&
theRowOfTheDynamicTable=&&
& function&&
get_Element(the_ele,the_tag)
the_tag.toLowerCase();&&
if(the_ele.tagName.toLowerCase()==the_tag)&&
while(the_ele=the_ele.offsetParent)
if(the_ele.tagName.toLowerCase()==the_tag)&&
return(null);&&
& function&&
del_row(the_table){&&&&
if(the_table.rows.length&3){&&
alert("此行为保留行，不允许删除!");&&
& return&&
the_cell,the_&&
the_cell=get_Element(event.srcElement,"td");&&
if(the_cell==null)&&
the_row=the_cell.parentElement.rowI&&
the_table.deleteRow(the_row);&&
&/script&&
& &table id="mytable"
&tr class="classtd" align=center
width=100%&
&td class="classtd" align="center" colspan="8"
&input type=button
value="添加一行"&&
onClick="addRow(mytable)"&
name="s_name" type="text" id="s_name"
size="20"&
&input type=button
value="删除一行"&&
onClick="del_row(mytable)"&
& &/table&
&!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""&
&html xmlns=""&
&head runat="server"&
&title&无标题页&/title&
&script type="text/javascript"&
&&& function
var tbody1 = document.getElementByIdx("tbody1");
document.createElement_x("&tr&");
tr.bgColor="#F6F6F6";//设置颜色
document.createElement_x("&td&");
var txtCount=document.createElement_x("input");//创建input元素对象
var txtName=document.createElement_x("input");//创建input元素对象
var fileupload1=document.createElement_x("input");//创建input元素对象
var lblName = document.createTextNode("文档名称：");
//文本类型& 类似innerHTML功能
var lblfile = document.createTextNode("&
文件：");//文本类型&&
不创建任何空间&
直接显示文字&&&&&&&&&&&&&&&&&&
txtCount.setAttribute("type","Hidden");//设置控件类型，&&
此为表单隐藏域
txtCount.setAttribute("name","txtCount");//设置TextBox的name属性
txtCount.setAttribute("value",i);//设置TextBox的Value属性
txtName.setAttribute("type","Text");
txtName.setAttribute("name","txtName"+i+"");//为了不让name属性相同，则用变量累加来命名。
fileupload1.setAttribute("type","file");
fileupload1.setAttribute("name","file"+i+"");
td.innerHTML=i;& //这个是我测试的时候想看看i的值
，哈&& 所以没去掉。
td.appendChild(txtCount);
td.appendChild(lblName);
td.appendChild(txtName);
td.appendChild(lblfile);
td.appendChild(fileupload1);
tr.appendChild(td);
tbody1.appendChild(tr);
&form id="form1"
runat="server"&
&&&&&&&&&&&
&&table id="table1"
border="1"&
&&&&&&&&&&&&&&&
&tbody id="tbody1"&
&&&&&&&&&&&
&&&&&&&&&&&
&input type="button" onclick="Add()" value="Add"
id="Button1"&
&&&&&&&&&&&
版本4：（加上了向数据库提交）
javascript动态添加表格数据行,ASP后台数据库保存例子
原帖地址：
在很多web应用中，我们会遇到很多需要动态插入多行纪录的地方。比如，在人才网站上，我们填写简历的时候，我们要填写我们的项目经验，我们可以根据自己的实际情况动态的添加条数，这种不是以单独页面的形式添加，这种动态添加是在同一个页面下动态添加，最后再一起提交到服务器保存到数据库中。
本文，我将以一个类似的例子来做一个前台用Javascript动态添加数据项，后台保存到数据库的例子。
浏览器：IE.6.0&&&&
后台：ASP (VBScript
前台：HTML + JavaScript
HTML代码：
src="myjs.js"&&/script&
&form name=frmUserInfo action="saveInfo.asp"
method=post&
&td&Name:&input id=txtName
name=Name&&/td&
&td&Sex:&input
name=Sex&&/td&
id=tabUserInfo border=1&
&td&Project
name:&/td&
description:&/td&
date:&/td&
&td&Finished
date:&/td&
&td&Delete&/td&
&tr style="display:none"
id=trUserInfo&
id=tdUserInfo&&input id=txtPName
name=ProjectName&&/td&
id=tdUserInfo&&input id=txtDesc
name=Desc&&/td&
id=tdUserInfo&&input id=txtBDate
name=BDate&&/td&
id=tdUserInfo&&input id=txtFDate
name=FDate&&/td&
&td id=tdUserInfo&&img
alt="Delete"
onclick="deleteRow(document.all.tabUserInfo,1,this)"&&/td&
&td&&input type=button
value="Add"
onclick="addRow(document.all.tabUserInfo,null,1,1)"&&/td&
&tr&&td&&input
type=submit value=Submit&&input
type=reset&&/td&&/tr&
&function addRow(tabObj,colNum,sorPos,targPos){
&&&&& var nTR = tabObj.insertRow(tabObj.rows.length-targPos);&&&& //& Insert a new row into appointed table on theappointed position.
&&&&& var TRs = tabObj.getElementsByTagName_r('TR');&&&&&&&&&&&&&&&&&&&&&&&&& //& Get TRs collection from the appointed table
&&&&& var sorTR = TRs[sorPos];&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //& Positioned the sorTR&&&&
&&&&& var TDs = sorTR.getElementsByTagName_r('TD');&&&&&&&&&&&&&&&&&&&&&&&&&& //& Get TDs collection from the appointed row&&&&
&&&&& if(colNum==0 || colNum==undefined || colNum==isNaN){&&&&&&&&
&&&&& &colNum=tabObj.rows[0].cells.
&&&&& &&&&& }&& &&&& &&&&&&&&&&&&
&&&& var ntd = new Array();&&&&&&&&&&&&&&&&&&&&&&&&&&& // Create a new TDs array&&&&
&&&& for(var i=0; i& colN i++){&&&&&&&&&&&&&&&&&&& // Traverl the TDs in row&&&&&&&&
&&&& &ntd[i] = nTR.insertCell();&&&&&&&&&&&&&&&&&&&&&&& // Create new cell&&&&&&&&
&&&& &ntd[i].id = TDs[0].&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& // copy the TD's id to new cell. | Attention! The TDs's suffix must be appointed&&&&&&&
&&&& &ntd[i].innerHTML = TDs[i].innerHTML;&&& // copy the value in ntd[i]'s innerHTML from corresponding TDs&&&&&&
&&&& & }&&&
&&&& &function deleteRow(tabObj,targPos,btnObj){&&&&&&&&&&&&&&&&&&&&&&& //Remove table row&&&&
&&&& &for(var i =0; i&tabObj.rows.i++){&&&&&&&&
&&&& &if(tabObj.getElementsByTagName_r('img')[i]==btnObj){&&&&&&&&&&&&&&&&&&
&&&& & tabObj.deleteRow(i+targPos);&&&&&&&&
&&&& & }&&&&
前台代码总结：&&&&
上面的代码有一个要注意的地方，那就是原始行 &tr style="display:none"
id=trUserInfo&，我们设置了样式为Display:none，这是因为，下面js中添加行采用的是newTD.innerHTML
sourceTD.innerHTML的方式，即直接把已经存在的列中的内容直接复制到新添加的列的innerHTML属性中，所以隐藏“数据源“列被防止用户删除而出现"Object
excepted" 错误。
---------------------------------------------------------------------------
VBScript 代码：
'###### Begin Transcation #####
conn.beginTrans&&&&&&&&&&&
' Start a transaction
sql = "insert into UserInfo(username,sex)
values("&&&&
sql=sql&"'"& request("Name")
sql=sql&"'"& request("Sex")
Response.Write
conn.execute(sql)
request("ProjectName").count&0 then
sql = "select max(id) as maxid from UserInfo"
set rs = conn.execute(sql)
maxid = rs("maxid")
set rs = nothing
for i =1 to request("ProjectName").count
sql = "insert into ProjectInfo(uid,pname,pdesc,bdate,fdate)
values("&&&&&&&&&&&&
sql=sql&""& maxid
sql=sql&"'"&
request("ProjectName")(i) &"',"
sql=sql&"'"& request("Desc")(i)
sql=sql&"'"& request("BDate")(i)
sql=sql&"'"& request("FDate")(i)
&"')"&&&&&&
Response.Write
"&sql&"&br&"&
conn.execute(sql)
if conn.Errors.count & 0
then&&&&&&&&&&&&&&&
' If occus any error in the transaction , roll back
transcation&&&&&&&&
conn.RollBackTrans&&
else&&&&&&&&&&&&&&&&
' If not error, commit the
transcation&&&&&
conn.close&
&& set conn =
后台代码总结：&&&&&
获取多数据的方法是调用request("").count，以count的数目来确定要往主表插入的子表纪录次数。
由于数据操作次数不确定，为了防止在执行数据库操作时发生异常，造成数据不一致。我们采用用事务管理。事务管理具有：原子性，一致性，等特点。可以保证数据安全。我们在数据库操作开始的时候调用conn.beginTrans打开一个事务，在数据操作结束时，用conn.Errors.count来判断在事务期间是否有错误发生，如果发生错误或异常就conn.RollBackTrans回滚。否则提交事务，完成数据库操作。
------------------------------------------------------------------------------------
预览：图一 ：进入填写数据页面，点击Add按钮，添加一行，到图二
图二：再添加一行并且填写数据到图三
图三：在添加了两行数据之后，点击Submit按钮提交数据
图四：提交表单后，数据库将会执行如浏览器打印的几条SQL语句，数据便成功添加到数据库。
总结：&&&&&&
这篇文章讲述了如何用Javascript动态地在前台添加用户输入数据的列，并且后台采用ASP技术将前台添加的数据插入数据库。&&&&&&
希望对学习ASP及Javascript的朋友有所帮助。
本文来自CSDN博客，转载请标明出处：
以上部分为摘录网上，应用到自己的程序中的时候，还需要适当变化，具体可参考管理系统的例子。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。JS 动态删除多行问题
[问题点数：40分，结帖人clclydj02]
JS 动态删除多行问题
[问题点数：40分，结帖人clclydj02]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2011年1月 Java大版内专家分月排行榜第二
本帖子已过去太久远了，不再提供回复功能。版权所有 京ICP备号-2
迷上了代码！