javascript动态添加表格数据行(ASP后台数据库保存示例)

在很多网应用中，我们会遇到很多需要动态插入多行纪录的地方。比如，在人才网站上，我们填写简历的时候，我们要填写我们的项目经验，我们可以根据自己的实际情况动态的添加条数，这种不是以单独页面的形式添加，这种动态添加是在同一个页面下动态添加，最后再一起提交到服务器保存到数据库中。本文，我将以一个类似的例子来做一个前台用爪哇岛描述语言动态添加数据项，后台保存到数据库的例子。浏览器：IE.6.0后台：ASP (VBScript)前台：超文本标记语言代码：复制代码代码如下：脚本src=' http : myjs。JS '/脚本表单名称=frmUserInfo操作=' saveinfo。ASP ' method=post table tr tdname :输入id=Name/TD tdsex :输入id=txtSex Name=Sex/TD/tr/table br table id=tabUserInfo边框=1 tr tdProject Name :/TD tdbefore描述：/TD tdBegin date :/TD代码：复制代码代码如下：/* *//*使用此功能动态添加一行*目标表*列数：表中一行的列数*或列数：新行的来源* targPos:将添加新行的位置。* */函数添加行(tabObj、colNum、sorPos、targPos).{ var NTr=TabObj。插入行(TabObj。成排。长度-targpo)；//在//指定位置的指定表格中插入新行var TRs=TabObj。GetElementsBytagname(' TR ')；//从指定的表var sorTR=TRs[sorPos]中获取拓尔思集合；//定位了sorTR var TDs=sorTR。GetElementsBytagname(' TD ')；//如果(colNum==0 | | colNum==undefined | | colNum==isNaN)，则从指定行获取总溶解固体（Total dissolved solids的缩写）集合.{ ColNum=TabObj。行[0]。细胞。长度；} var NTD=new Array()；//为(var I=0；i colNum(一).{ //Traverl第ntd[i]行中的TDs=NTr。InsertCell()；//创建新单元格ntd[i].id=TDs[0]。id；//将推倒（网络用词）的编号复制到新的单元格中。|注意！总溶解固体（Total dissolved solids的缩写）的//后缀必须指定为ntd[i].innerHTML=TDs[i].innerHTML//将ntd[i]的innerHTML中的值从相应的总溶解固体（Total dissolved solids的缩写）中复制} }/**/*此函数用于删除指定表中的指定行* tabObj:指定表* targPos:目标行位置* btnObj:当前单击的删除图像按钮* */函数删除行(tabObj、targPos、btnObj).{//删除(var I=0；伊塔博杰。行。长度；（一).{ if(TabObj。GetElementsBytagname(' img ')[I]==BtNobJ).{ TabObj。DeleteRow(I TARGPoS)；} } } 前台代码总结：上面的代码有一个要注意的地方，那就是原始行tr style=' display : none ' id=trUserInfo，我们设置了样式为Display:none，这是因为，下面射流研究…中添加行采用的是纽特德。innerhtml=源TD。内容的方式，即直接把已经存在的列中的内容直接复制到新添加的列的innerHTML属性中，所以隐藏"数据源"列被防止用户删除而出现"对象除外"错误。

脚本语言代码：复制代码代码如下：% ' # # # #开始交易# # # #连接。开始否'开始交易SQL='插入用户信息(用户名，性别)值(' sql=sql ' ' '请求('名称'))，' SQL=SQL ' ' '请求('性别')'响应.写SQL ' p ' conn . execute(SQL)if request(' PROJECt name ')。计数0然后' dim maxid maxid=1 sql='从用户信息中选择最大值(id)作为maxid ' set RS=conn . execute(SQL)maxid=RS(' maxid ')RS。对于I=1请求(' PROJECt name ')，关闭集RS=no .计数SQL='插入项目信息(uid，pname，pdesc，bdate，fdate)值(' sql=sql'' maxid '，' sql=sql ' ' '请求('项目名称')(I)'，' sql=sql ' ' '请求(' Desc')(i)'，' sql=sql ' ' '请求(' BDate')(i)'，' SQL=SQL ' ' '请求(' FDate ')(I)')'响应.写如果连接出错，则执行下一个结束。计数0然后"如果在事务中出现任何错误，回滚事务conn.RollBackTrans else "如果没有错误，提交事务连接结束。如果连接结束设置conn=无%后台代码总结：获取多数据的方法是调用请求("")。数数，以数数的数目来确定要往主表插入的子表纪录次数。由于数据操作次数不确定，为了防止在执行数据库操作时发生异常，造成数据不一致。我们采用用事务管理。事务管理具有：原子性，一致性，等特点。可以保证数据安全。我们在数据库操作开始的时候调用conn.beginTrans打开一个事务，在数据操作结束时，用连接。错误。计数来判断在事务期间是否有错误发生，如果发生错误或异常就conn.RollBackTrans回滚。否则提交事务，完成数据库操作。预览：图一：进入填写数据页面，点击增加按钮，添加一行，到图二

图2:添加另一行，填写图3中的数据。

图3:添加两行数据后，点击提交按钮提交数据。

图4:提交表单后，数据库将执行浏览器打印的几条SQL语句，数据将成功添加到数据库中。

总结：本文讲述了如何通过Javascript在前台动态添加用户输入数据的列，在后台通过ASP技术将前台添加的数据插入到数据库中。希望对学习ASP和Javascript的朋友有所帮助。如果你有任何问题，可以联系我。如果您对本文有任何意见，欢迎批评指正！