javascript 동적 으로 표 데이터 줄 추가(ASP 배경 데이터베이스 저장 예)

많은 웹 애플 리 케 이 션 에서 우 리 는 여러 줄 의 기록 을 동적 으로 삽입 해 야 하 는 곳 을 많이 만 날 수 있다.예 를 들 어 인재 사이트 에서 우리 가 이력 서 를 작성 할 때 우 리 는 우리 의 프로젝트 경험 을 작성 해 야 한다.우 리 는 자신의 실제 상황 에 따라 동태 적 으로 항목 수 를 추가 할 수 있다.이것 은 단독 페이지 의 형식 으로 추가 하 는 것 이 아니 라 같은 페이지 에서 동태 적 으로 추가 하고 마지막 으로 서버 에 제출 하여 데이터 베이스 에 저장 할 수 있다.본 고 는 제 가 비슷 한 예 를 들 어 프론트 데스크 톱 에서 자바 script 동적 으로 데이터 항목 을 추가 하고 백 스테이지 에서 데이터 베 이 스 를 저장 하 는 예 를 들 겠 습 니 다.브 라 우 저:IE.6.0 배경:ASP(VBScript)프론트: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); 
} 
} 
} 

프론트 코드 요약:위의 코드 는 주의해 야 할 부분 이 있 습 니 다.그것 은 바로 원본 줄입 니 다.우 리 는 디 스 플레이:none 으로 스타일 을 설 정 했 습 니 다.이것 은...다음 js 에 줄 을 추가 하 는 것 은 newTD.innerHTML=sourceTD.innerHTML 방식 을 사용 합 니 다.즉,이미 존재 하 는 열 에 있 는 내용 을 새로 추 가 된 열의 innerHTML 속성 에 직접 복사 하기 때문에'데이터 원본'열 이 사용자 가 삭제 되 는 것 을 방지 하기 위해'Object excepted'오류 가 발생 했 습 니 다.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 

%> 

배경 코드 요약:다 중 데 이 터 를 얻 는 방법 은 request(").count 를 호출 하여 주 표 에 삽입 할 하위 표 기록 횟수 를 count 의 숫자 로 확인 합 니 다.데이터 조작 횟수 가 불확실 하기 때문에 데이터 베 이 스 를 실행 할 때 이상 이 발생 하 는 것 을 방지 하기 위해 데이터 가 일치 하지 않 습 니 다.우 리 는 사무 관 리 를 채택 한다.사무 관 리 는 원자 성,일치 성 등 특징 을 가지 고 있다.데이터 안전 을 보장 할 수 있 습 니 다.데이터베이스 작업 이 시 작 될 때 conn.beginTrans 를 호출 하여 사 무 를 엽 니 다.데이터 작업 이 끝 날 때 conn.Errors.count 로 업무 기간 에 오류 가 발생 했 는 지 판단 합 니 다.오류 나 이상 이 발생 하면 conn.RollBackTrans 로 스크롤 백 합 니 다.그렇지 않 으 면 사 무 를 제출 하고 데이터베이스 작업 을 완료 합 니 다.미리 보기:그림 1:데이터 페이지 에 들 어가 서 Add 단 추 를 누 르 고 한 줄 을 추가 합 니 다.그림 2
그림 2:한 줄 을 더 추가 하고 데 이 터 를 그림 3에 작성 한다.
그림 3:두 줄 의 데 이 터 를 추가 한 후에 Submit 단 추 를 누 르 면 데 이 터 를 제출 합 니 다
그림 4:폼 을 제출 하면 데이터 베 이 스 는 브 라 우 저 에서 인쇄 한 몇 개의 SQL 문 구 를 실행 하고 데이터 베 이 스 를 성공 적 으로 추가 합 니 다.
요약:      이 글 은 자 바스 크 립 트 로 사용자 가 입력 한 데이터 의 열 을 동적 으로 프론트 에 추가 하고,백 엔 드 는 ASP 기술 로 프론트 에 추 가 된 데 이 터 를 데이터베이스 에 삽입 하 는 방법 을 다 루 고 있다.      ASP 및 자 바스 크 립 트 를 공부 하 는 친구 들 에 게 도움 이 되 었 으 면 합 니 다.      궁금 한 거 있 으 면 연락 주세요.만약 당신 이 본문 에 대해 어떤 의견 이 있다 면,비판 과 지적 을 열렬 히 환영 합 니 다!