javascript動(dòng)態(tài)添加表格數(shù)據(jù)行(ASP后臺(tái)數(shù)據(jù)庫保存例子)
本文,我將以一個(gè)類似的例子來做一個(gè)前臺(tái)用Javascript動(dòng)態(tài)添加數(shù)據(jù)項(xiàng),后臺(tái)保存到數(shù)據(jù)庫的例子。
瀏覽器:IE.6.0
后臺(tái):ASP (VBScript )
前臺(tái):HTML + JavaScript
HTML代碼:
<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代碼:
/**//*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>,我們設(shè)置了樣式為Display:none,這是因?yàn)?,下面js中添加行采用的是newTD.innerHTML = sourceTD.innerHTML的方式,即直接把已經(jīng)存在的列中的內(nèi)容直接復(fù)制到新添加的列的innerHTML屬性中,所以隱藏“數(shù)據(jù)源“列被防止用戶刪除而出現(xiàn)"Object excepted" 錯(cuò)誤。
VBScript 代碼:
<%
'###### 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ù)目來確定要往主表插入的子表紀(jì)錄次數(shù)。 由于數(shù)據(jù)操作次數(shù)不確定,為了防止在執(zhí)行數(shù)據(jù)庫操作時(shí)發(fā)生異常,造成數(shù)據(jù)不一致。我們采用用事務(wù)管理。事務(wù)管理具有:原子性,一致性,等特點(diǎn)??梢员WC數(shù)據(jù)安全。我們在數(shù)據(jù)庫操作開始的時(shí)候調(diào)用conn.beginTrans打開一個(gè)事務(wù),在數(shù)據(jù)操作結(jié)束時(shí),用conn.Errors.count來判斷在事務(wù)期間是否有錯(cuò)誤發(fā)生,如果發(fā)生錯(cuò)誤或異常就conn.RollBackTrans回滾。否則提交事務(wù),完成數(shù)據(jù)庫操作。
預(yù)覽:
圖一 :進(jìn)入填寫數(shù)據(jù)頁面,點(diǎn)擊Add按鈕,添加一行,到圖二
圖二:再添加一行并且填寫數(shù)據(jù)到圖三
圖三:在添加了兩行數(shù)據(jù)之后,點(diǎn)擊Submit按鈕提交數(shù)據(jù)
圖四:提交表單后,數(shù)據(jù)庫將會(huì)執(zhí)行如瀏覽器打印的幾條SQL語句,數(shù)據(jù)便成功添加到數(shù)據(jù)庫。
總結(jié):
這篇文章講述了如何用Javascript動(dòng)態(tài)地在前臺(tái)添加用戶輸入數(shù)據(jù)的列,并且后臺(tái)采用ASP技術(shù)將前臺(tái)添加的數(shù)據(jù)插入數(shù)據(jù)庫。
希望對學(xué)習(xí)ASP及Javascript的朋友有所幫助。
如果您有什么疑問,可以聯(lián)系我。 如果您對本文有何意見,熱烈歡迎批評指正!
- JavaScript如何動(dòng)態(tài)創(chuàng)建table表格
- JS實(shí)現(xiàn)從表格中動(dòng)態(tài)刪除指定行的方法
- js生成動(dòng)態(tài)表格并為每個(gè)單元格添加單擊事件的方法
- JS實(shí)現(xiàn)動(dòng)態(tài)生成html table表格的方法分析
- javascript如何動(dòng)態(tài)加載表格與動(dòng)態(tài)添加表格行
- JS實(shí)現(xiàn)動(dòng)態(tài)生成表格并提交表格數(shù)據(jù)向后端
- JS實(shí)現(xiàn)向表格中動(dòng)態(tài)添加行的方法
- JavaScript中動(dòng)態(tài)向表格添加數(shù)據(jù)
- js動(dòng)態(tài)修改表格行colspan列跨度的方法
- JavaScript實(shí)現(xiàn)簡單動(dòng)態(tài)表格
相關(guān)文章
基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建表格和增加表格行數(shù)
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建表格和增加表格行數(shù)的相關(guān)資料,需要的朋友可以參考下2015-12-12JavaScript實(shí)現(xiàn)給數(shù)字添加千位分隔符
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實(shí)現(xiàn)給數(shù)字添加千位分隔符,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11教你用javascript實(shí)現(xiàn)隨機(jī)標(biāo)簽云效果_附代碼
下面小編就為大家?guī)硪黄棠阌胘avascript實(shí)現(xiàn)隨機(jī)標(biāo)簽云效果_附代碼。小編覺得很實(shí)用,現(xiàn)在分享給大家。給大家一個(gè)參考2016-03-03千萬不要錯(cuò)過的JavaScript高效對比數(shù)組差異方法
前端開發(fā)中,我們通常需要對比兩個(gè)數(shù)組對象的差異。這其中有很多種方法,但是有些方法會(huì)帶來一些問題,所以本文為大家準(zhǔn)備了一個(gè)高效方法,需要的可以參考一下2023-05-05JS公共小方法之判斷對象是否為domElement的實(shí)例
下面小編就為大家?guī)硪黄狫S公共小方法之判斷對象是否為domElement的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11分享一道筆試題[有n個(gè)直線最多可以把一個(gè)平面分成多少個(gè)部分]
今天地鐵上和一個(gè)同事閑聊,給我說的一道題,回來想了想,寫出來的,說來慚愧,我用的是行測方面數(shù)字推理里面的知識(shí)歸納出來的,當(dāng)然這個(gè)可以用遞歸寫出來,說說我的代碼,以及遞歸的思路2012-10-10