asp jsp JavaScript动态实现添加数据行

在应用程序的开发中，有些输入信息是动态的，比如我们要注册一个员工的工作经历，比如下图

如果做成死的，只能填写三个，如果是四个呢？或者更多呢，那不是添加不上去了吗，所以这样固然不好，我们可以用动态添加表格行实现，如下图，添加一行，输入一行信息，这样比较灵活

下面我们就来看看如何在白杨和ASP。网中结合爪哇岛描述语言来实现这种效果：首先，动态添加表格是要在前台实现的，当然后台也可以，不过可能要用到ajax，很麻烦，所以最好采用爪哇岛描述语言来实现，下面来介绍动态添加表格行的两种方式：第一种：源码Javascript:

脚本类型=' text/JavaScript '/* */*此函数用于动态添加一行* tabObj :目标表* colNum:表中一行的列数* sorPos:新行的来源* targPos:将添加新行的位置。* */函数addRow(tabObj，colNum，sorPos，TargPoS){ var NTr=TabObj。插入行(TabObj。成排。长度-targpo)；//在//指定位置的指定表格中插入新行var TRs=TabObj。GetElementsBytagname(' TR ')；//从指定的表var sorTR=TRs[sorPos]中获取TRs集合；//定位了sorTR var TDs=sorTR。GetElementsBytagname(' TD ')；//如果(colNum==0 | | colNum==undefined | | colNum==isNaN){ colNum=TabObj。行[0]。细胞。长度；} var NTD=new Array()；//为(var I=0；i colNumi ){ //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:当前单击的删除图像按钮* */函数deleteRow(tabObj，targPos，BTNobj){//删除(var I=0；伊塔博杰。行。长度；I){ if(Tabobj。GetElementsBytagname(' img ')[I]==BtNobj){ Tabobj。deleteRow(I targPos)；} } } /scriptHtml

表id=tabUserInfo边框=1宽度='720' tr td姓名运输署/运输署性别运输署/运输署年龄运输署/运输署爱好/tdtdtddelete/TD/tr style=' display : none ' id=trUserInfo TD id=tduserninfoinput id=userninfoinput id=用户性别名称=usernsex/TD id=用户年龄名称=用户年龄/TD id=tduserninfoinput id=用户喜爱名称=用户喜爱/TD TD id=tduserninfoinfoinmg alt=' Delete ' onClick=' deleteRow(文档。全部。tabuersinfo，1，this)'/td在这里有点要注意：tr style=' display : none ' id=trUserInfo主要是为了，添加数据的时候，文本框中的值都是空的，要不然添加的新行都是有值的，这样很不好，当然了，为了防止读取的是空值，在后面获得数据组的时候，我们从索引一开始获得值，这个在后面会讲到

第二种方式：JavaScript

脚本类型='text/javascript '函数addRow(){ var root=document。getelementbyid(' t body ')var allRows=root。getelementsbytagname(' tr ')；var所有单元格=所有行[0].getElementsByTagName(' TD ')；var new row=root。insert row()；var新单元格0=新行。insert cell()；var新单元格1=新行。insert cell()；var新单元格2=新行。insert cell()；var新单元格3=新行。insert cell()；newCell0.innerHTML=allCells[0].innerhtml newcell 1 . innerhtml=all cells[1]。innerhtml newcell 2 . innerhtml=all cells[2]。innerhtml newcell 3 . innerhtml=all cells[3]。innerHTML}函数removeRow(r){ var root=r .父节点；根。delete row(r)；} /scriptHtml

表边框=' 1 ' tr tdaaaa/TD tdbbbb/TD tdcccc/TD TD TD操作/TD/tr t select/select/TD t input id=' text 1 ' type=' text '/TD t input id=' text 2 ' type=' text '/TD/TD/tr t body id=' t body ' tr style=' display : none ' t select/select/TD t input id=' a ' type=' text '/TD t input id=' b ' type=' text '/TD t input type=' button ' value=' remove '上单击=' remove '行(此。父节点。父节点。父节点).注意：和第一个基本类似，如果你希望默认的情况下就有一行，那么可以静态的添加一行

下面，就来看看如何通过后台完成对其操作，比如对新增行的修改，删除，添加等首先说一下数据库的问题对于这些需要动态添加的表格行的记录，我们需要重新放到放到一个表里，就是单独做一个表，比如上面说到的工作经历的问题当然了，员工要有一个员工表，记录姓名，年龄，身份证，学历等信息，对于工作经历这块，就需要单独做一个工作经历表，然后根据外键，建立他们之间的关系，这是数据库方面的设计下面就来看看如何在白杨中实现这些添加操作：代码：

！-#包含文件='inc/conn.asp' - % if请求(' tj')='添加然后设置rs=服务器.CreateObject('adodb .RecordSet') strsql='从tb_person' rs.open中选择* strsql，conn，2，3用于i=1请求(“用户名”).数数RS。addnew()RS(' userName ')=请求(' userName ')(I)RS(' sexual ')=请求('用户年龄')(I)RS('艾蒿)=请求('用户喜爱')(I)RS。如果% htmlheadscript src=' http 3360 myjs，则更新下一个结束。js '/script/head dy form name=Frmuserinfo action=' user _ list 1。ASP ' method=post br表id=tabUserInfo姓名运输署/运输署性别运输署/运输署年龄运输署/运输署爱好/tdtdtddelete/TD/tr style=' display : none ' id=trUserInfo TD id=tduserninfoinput id=userninfoinput id=用户性别名称=usernsex/TD id=用户年龄名称=用户年龄/TD id=tduserninfoinput id=用户喜爱名称=用户喜爱/TD TD id=tduserninfoinfoinmg alt=' Delete ' onClick=' deleteRow(文档。全部。tabuersinfo，1，this)'/td添加名称=' TJ '/TD/tr/表格/表格/正文注意：在这里我们可以直接通过请求('用户名)获得用户名列的数组值，通过调试可以看到，第一个（索引为0)值为',',所以获得值的时候我们要从索引为一开始读取，然后逐一添加操作即可

修改：首先根据外键循环读取数据到一个表格里，代码：

表单名称=frm user info action=' user _ list 1 . ASP ' method=post br table border=1 width=' 720 ' tr TD name/TD TD TD gender/TD TD TD age/TD hobby/tdtdtddelete/TD/tr % set RS=server。CreateObject('adodb。RecordSet)strsql='从tb_person '中选择* RS . open strsql，conn，2，3 do而not RS . eof % tr id=truserinfo 1 Td id=tduserninfo 1 in ut id=userName 1 name=userName 1 value=' %=RS(' userName ')% '/Td Td id=tduserninfo 1 in ut id=usernesi 1 name=user sex 1 value=' %=RS(' age ')% '/Td Td id=tduserninfo 1 in ut id=userage 1 name=user age-img alt=' Delete ' OnClick=' deleteRow(document . all . TabUserInfo，1，This)'-/TD/tr % RS . movenext loop % table id=TabUserInfo border=1 width=' 720 ' tr TD/TD/TD/TD/TD/TD/TD/TD/tr style=' display : none ' id=trUserInfo TD id=tduserinfo input id=用户名=用户名/TD TD id=tduser infoinput id=user sex name=user sex/TD TD id=TD全部。tabuserinfo，null，1，1)'/TD/tr/table我的想法是将之前添加的记录与现在要添加的记录行分开。如果要删除记录行或修改记录行，可以先删除所有记录，然后重新添加以前的记录和当前的记录。至于代码，添加的思路是一样的，只是具体要添加两个代码，大家可以自己试试。

让我们来看看在ASP.NET是如何实现的。如果使用asp.NET自带的控件封装模式，实现起来是非常困难的，所以这里我们可以使用上面提到的ASP思想来完成js和html，它们是相同的，但是与后台代码不同：比如添加。

受保护的void Button1_Click(对象发送者，事件参数e) {字符串用户名=请求['用户名']。ToString()；字符串[] namelist=用户名。拆分('，')；string[] sexlist=用户名。拆分('，')；string[] agelist=username。拆分('，')；string[]最可爱=用户名。拆分('，')；for(int I=1；我的名字列表。长度；I) {//获取传递的值，操作字符串名称=namelist [I]。tostring()；string usersex=sexlist[i]。ToString()；string userage=agelist[i]。ToString()；string userlove=agelist[i]。ToString()；//操作它，比如添加修改等。}}这里，我们使用Request['username']对值进行Text，页面使用html标签，而不是服务器端控件，所以可以用asp或jsp处理。同样，修改和删除也可以通过使用asp或jsp的思想来处理。或者，从提交到处理，完全采用jsp和asp的思想创建一个HttpHandler就可以了，把所有的数据都提交给它处理。但是第一种方法更好，这样很容易得到值并进行处理，不需要转换。

具体问题具体对待。例如，默认情况下有一条线。此时，需要在员工表中添加一个工作记录字段。该行中的所有记录都将添加到员工表中。编辑删除时，需要先编辑，再添加两个。添加数据行的一般思路是这样的。如果有问题，希望大家指正。