javascript动态添加表格数据行ASP后台数据库保存例子.docxVIP

在很多web应用中，我们会遇到很多需要动态插入多行纪录的地方。比如，在人才网站上，我们填写简历的时候，我们要填写我们的项目经验，我们可以根据自己的实际情况动态的添加条数，这种不是以单独页面的形式添加，这种动态添加是在同一个页面下动态添加，最后再一起提交到服务器保存到数据库中。 本文，我将以一个类似的例子来做一个前台用Javascript动态添加数据项，后台保存到数据库的例子。 浏览器：IE.6.0 后台：ASP (VBScript) 前台：HTML + JavaScriptHTML代码：Name:Sex:Projectname:Befredescription:Begindate:Finisheddate:DeleteJS代码：/*Thisfunctionisusetoaddonerowdynamicly*tabObj:Targettable*colNum:Thenumberofcolumnsthatofarowintable*sorPos:Thesourceofthenewrow.*targPos:Thepositionwherethenewrowwillbeadded.*/functionaddRow(tabObj,colNum,sorPos,targPos)varnTR=tabObj.insertRow(tabObj.rows.length-targPos);/Insertanewrowintoappointedtableonthe/appointedposition.varTRs=tabObj.getElementsByTagName(TR);/GetTRscollectionfromtheappointedtablevarsorTR=TRssorPos;/PositionedthesorTRvarTDs=sorTR.getElementsByTagName(TD);/GetTDscollectionfromtheappointedrowif(colNum=0|colNum=undefined|colNum=isNaN)colNum=tabObj.rows0.cells.length;varntd=newArray();/CreateanewTDsarrayfor(vari=0;icolNum;i+)/TraverltheTDsinrowntdi=nTR.insertCell();/Createnewcellntdi.id=TDs0.id;/copytheTDsidtonewcell.|Attention!TheTDss/suffixmustbeappointedntdi.innerHTML=TDsi.innerHTML;/copythevalueinntdisinnerHTMLfromcorrespondingTDs/*Thisfunctionisusetoremoveappointedrowinappointedtable*tabObj:theappointedtable*targPos:targetrowposition*btnObj:currentlyclickeddeleteimagebutton*/functiondeleteRow(tabObj,targPos,btnObj)/Removetablerowfor(vari=0;itabObj.rows.length;i+)if(tabObj.getElementsByTagName(img)i=btnObj)tabObj.deleteRow(i+targPos);前台代码总结： 上面的代码有一个要注意的地方，那就是原始行，我们设置了样式为Display:none，这是因为，下面js中添加行采用的是newTD.innerHTML = sourceTD.innerHTML的方式，即直接把已经存在的列中的内容直接复制到新添加的列的innerHTML属性中，所以隐藏“数据源“列被防止用户删除而出现Object excepted 错误。-VBScript 代码：%#BeginTranscation#conn.beginTransStartatransactionsql=insertintoUserInfo(username,sex)values(sql=sql&request(Name)&,sql=sql&request(Sex)&)Response.Write sql&conn.execute(sql)ifrequest(ProjectName).count0thendimmaxidmaxid=1sql=selectmax(id)asmaxidfromUserInfosetrs=conn.execute(sql)maxid=rs(maxid)rs.closesetrs=nothingfori=1torequest(ProjectName).countsql=insertintoProjectInfo(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&conn.execute(sql)nextendififconn.Errors.count0thenIfoccusanyerrorinthetransaction,rollbacktranscationconn.RollBackTranselseIfnoterror,mitTransendif conn.close set conn = nothing%后台代码总结： 获取多数据的方法是调用request().count，以count的数目来确定要往主表插入的子表纪录次数。 由于数据操作次数不确定，为了防止在执行数据库操作时发生异常，造成数据不一致。我们采用用事务管理。事务管理具有：原子性，一致性，等特点。可以保证数据安全。我们在数据库操作开始的时候调用conn.beginTrans打开一个事务，在数据操作结束时，用conn.Errors.count来判断在事务期间是否有错误发生，如果发生错误或异常就conn.RollBackTrans回滚。否则提交事务，完成数据库操作。-预览：图一 ：进入填写数据页面，点击Add按钮，添加一行，到图二图二：再添加一行并且填写数据到图三图三：在添加了两行数据之后，点击Submit按钮提交数据图四：提交表单后，数据库将会执行如浏览器打印的几条S