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

　　<script src="myjs.js"></script>

　　<form name=frmUserInfo action="saveInfo.asp" method=post>

　　<table>

　　<tr>

　　<td>Name:<input id=txtName name=Name></td>

　　<td>Sex:<input id=txtSex name=Sex></td>

　　</tr>

　　</table>

　　<br>

　　<table id=tabUserInfo border=1>

　　<tr>

　　<td>Project name:</td>

　　<td>Befre description:</td>

　　<td>Begin date:</td>

　　<td>Finished date:</td>

　　<td>Delete</td>

　　</tr>

　　<tr style="display:none" id=trUserInfo>

　　<td id=tdUserInfo><input id=txtPName name=ProjectName></td>

　　<td id=tdUserInfo><input id=txtDesc name=Desc></td>

　　<td id=tdUserInfo><input id=txtBDate name=BDate></td>

　　<td id=tdUserInfo><input id=txtFDate name=FDate></td>

　　<td id=tdUserInfo><img alt="Delete" onclick="deleteRow(document.all.tabUserInfo,1,this)"></td>

　　</tr>

　　<tr>

　　<td><input type=button value="Add" onclick="addRow(document.all.tabUserInfo,null,1,1)"></td>

　　</tr>

　　</table>

　　<table>

　　<tr><td><input type=submit value=Submit><input type=reset></td></tr>

　　</table>

　　</form>

　　/**//*This function is use to add one row dynamicly

　　* tabObj : Target table

　　* colNum: The number of columns that of a row in table

　　* sorPos: The source of the new row.

　　* targPos: The position where the new row will be added.

　　*

　　*/

　　function addRow(tabObj,colNum,sorPos,targPos)...{

　　var nTR = tabObj.insertRow(tabObj.rows.length-targPos); // Insert a new row into appointed table on the

　　//appointed position.

　　var TRs = tabObj.getElementsByTagName('TR'); // Get TRs collection from the appointed table

　　var sorTR = TRs[sorPos]; // Positioned the sorTR

　　var TDs = sorTR.getElementsByTagName('TD'); // Get TDs collection from the appointed row

　　if(colNum==0 || colNum==undefined || colNum==isNaN)...{

　　colNum=tabObj.rows[0].cells.length;

　　}

　　var ntd = new Array(); // Create a new TDs array

　　for(var i=0; i< colNum; i++)...{ // Traverl the TDs in row

　　ntd[i] = nTR.insertCell(); // Create new cell

　　ntd[i].id = TDs[0].id; // 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

　　}

　　}

　　/**//* This function is use to remove appointed row in appointed table

　　* tabObj: the appointed table

　　* targPos: target row position

　　* btnObj: currently clicked delete image button

　　*

　　*/

　　function deleteRow(tabObj,targPos,btnObj)...{ //Remove table row

　　for(var i =0; i<tabObj.rows.length;i++)...{

　　if(tabObj.getElementsByTagName('img')[i]==btnObj)...{

　　tabObj.deleteRow(i+targPos);

　　}

　　}

　　}

　　<%

　　'###### Begin Transcation #####

　　conn.beginTrans ' Start a transaction

　　sql = "insert into UserInfo(username,sex) values("

　　sql=sql&"'"& request("Name") &"',"

　　sql=sql&"'"& request("Sex") &"')"

　　Response.Write sql&"<p>"

　　conn.execute(sql)

　　if request("ProjectName").count>0 then

　　dim maxid

　　maxid = 1

　　sql = "select max(id) as maxid from UserInfo"

　　set rs = conn.execute(sql)

　　maxid = rs("maxid")

　　rs.close

　　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)

　　next

　　end if

　　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.commitTrans

　　end if

　　conn.close

　　set conn = nothing

　　%>