javascript動(dòng)態(tài)添加表格數(shù)據(jù)行(ASP后臺(tái)數(shù)據(jù)庫(kù)保存例子)

更新時(shí)間：2010年05月08日 00:09:22 作者：

本文，我將以一個(gè)類似的例子來(lái)做一個(gè)前臺(tái)用Javascript動(dòng)態(tài)添加數(shù)據(jù)項(xiàng)，后臺(tái)保存到數(shù)據(jù)庫(kù)的例子。

在很多web應(yīng)用中，我們會(huì)遇到很多需要?jiǎng)討B(tài)插入多行紀(jì)錄的地方。比如，在人才網(wǎng)站上，我們填寫(xiě)簡(jiǎn)歷的時(shí)候，我們要填寫(xiě)我們的項(xiàng)目經(jīng)驗(yàn)，我們可以根據(jù)自己的實(shí)際情況動(dòng)態(tài)的添加條數(shù)，這種不是以單獨(dú)頁(yè)面的形式添加，這種動(dòng)態(tài)添加是在同一個(gè)頁(yè)面下動(dòng)態(tài)添加，最后再一起提交到服務(wù)器保存到數(shù)據(jù)庫(kù)中。

本文，我將以一個(gè)類似的例子來(lái)做一個(gè)前臺(tái)用Javascript動(dòng)態(tài)添加數(shù)據(jù)項(xiàng)，后臺(tái)保存到數(shù)據(jù)庫(kù)的例子。

瀏覽器：IE.6.0
后臺(tái)：ASP (VBScript )
前臺(tái)：HTML + JavaScript

HTML代碼：

復(fù)制代碼代碼如下:

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

JS代碼：

復(fù)制代碼代碼如下:

 
/**//*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); 
} 
} 
} 

前臺(tái)代碼總結(jié)：
上面的代碼有一個(gè)要注意的地方，那就是原始行 <tr style="display:none" id=trUserInfo>，我們?cè)O(shè)置了樣式為Display:none，這是因?yàn)?，下面js中添加行采用的是newTD.innerHTML = sourceTD.innerHTML的方式，即直接把已經(jīng)存在的列中的內(nèi)容直接復(fù)制到新添加的列的innerHTML屬性中，所以隱藏“數(shù)據(jù)源“列被防止用戶刪除而出現(xiàn)"Object excepted" 錯(cuò)誤。

VBScript 代碼：

復(fù)制代碼代碼如下:

 
<% 
'###### 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 

%> 

后臺(tái)代碼總結(jié)：
獲取多數(shù)據(jù)的方法是調(diào)用request("").count，以count的數(shù)目來(lái)確定要往主表插入的子表紀(jì)錄次數(shù)。由于數(shù)據(jù)操作次數(shù)不確定，為了防止在執(zhí)行數(shù)據(jù)庫(kù)操作時(shí)發(fā)生異常，造成數(shù)據(jù)不一致。我們采用用事務(wù)管理。事務(wù)管理具有：原子性，一致性，等特點(diǎn)?？梢员ＷC數(shù)據(jù)安全。我們?cè)跀?shù)據(jù)庫(kù)操作開(kāi)始的時(shí)候調(diào)用conn.beginTrans打開(kāi)一個(gè)事務(wù)，在數(shù)據(jù)操作結(jié)束時(shí)，用conn.Errors.count來(lái)判斷在事務(wù)期間是否有錯(cuò)誤發(fā)生，如果發(fā)生錯(cuò)誤或異常就conn.RollBackTrans回滾。否則提交事務(wù)，完成數(shù)據(jù)庫(kù)操作。

預(yù)覽：
圖一：進(jìn)入填寫(xiě)數(shù)據(jù)頁(yè)面，點(diǎn)擊Add按鈕，添加一行，到圖二

圖二：再添加一行并且填寫(xiě)數(shù)據(jù)到圖三

圖三：在添加了兩行數(shù)據(jù)之后，點(diǎn)擊Submit按鈕提交數(shù)據(jù)

圖四：提交表單后，數(shù)據(jù)庫(kù)將會(huì)執(zhí)行如瀏覽器打印的幾條SQL語(yǔ)句，數(shù)據(jù)便成功添加到數(shù)據(jù)庫(kù)。

總結(jié)：
      這篇文章講述了如何用Javascript動(dòng)態(tài)地在前臺(tái)添加用戶輸入數(shù)據(jù)的列，并且后臺(tái)采用ASP技術(shù)將前臺(tái)添加的數(shù)據(jù)插入數(shù)據(jù)庫(kù)。
      希望對(duì)學(xué)習(xí)ASP及Javascript的朋友有所幫助。
      如果您有什么疑問(wèn)，可以聯(lián)系我。如果您對(duì)本文有何意見(jiàn)，熱烈歡迎批評(píng)指正！

您可能感興趣的文章: