Javascript가 테이블 데이터 행을 동적으로 추가합니다(ASP 백그라운드 데이터베이스 저장 예)_javascript 기술

많은 웹 애플리케이션에서 우리는 여러 행의 레코드를 동적으로 삽입해야 하는 여러 위치를 접하게 됩니다. 예를 들어 탤런트 사이트에서는 이력서를 작성할 때 프로젝트 경험을 작성해야 하는데, 실제 상황에 따라 항목 수를 동적으로 추가할 수 있는데, 이는 별도의 페이지 형태로 추가되지 않습니다. 이 동적 추가는 동일한 페이지에 동적으로 추가하고 마지막으로 서버에 제출하고 데이터베이스에 저장합니다.

이 기사에서는 유사한 예를 사용하여 프런트엔드에서 Javascript를 사용하여 데이터 항목을 동적으로 추가하고 백그라운드에서 데이터베이스에 저장합니다.

브라우저: IE.6.0
백엔드: ASP(VBScript)
프런트엔드: HTML JavaScript

HTML 코드:

코드 복사 코드는 다음과 같습니다.

>

이름:	성별:<입력 ID=txtSex 이름=성별>

프로젝트 이름:	설명 전:	시작 날짜:	완료 날짜:	삭제 < /tr>
		< td id=tdUserInfo>

<입력 유형=제출 값=제출><입력 유형=재설정>

;




JS 코드:

코드 복사 코드는 다음과 같습니다. : /**//*한 행을 동적으로 추가하는 함수입니다.

* tabObj : 대상 테이블

* colNum: 테이블 행의 열 수
* sorPos: 새 행의 소스.
* targPos: 새 행이 추가될 위치입니다.
*
*/
함수 addRow(tabObj,colNum,sorPos,targPos)...{
var nTR = tabObj.insertRow(tabObj.rows. length-targPos); // 지정된 테이블의
//지정된 위치에 새 행을 삽입합니다.
var TRs = tabObj.getElementsByTagName('TR') // 지정된 테이블에서 TR 컬렉션을 가져옵니다. >var sorTR = TRs [sorPos]; // sorTR 위치 지정
var TDs = sorTR.getElementsByTagName('TD') // 지정된 행에서 TD 컬렉션 가져오기
if(colNum==0 || colNum ==정의되지 않음 || colNum==isNaN)...{
colNum=tabObj.rows[0].cells.length;
}

var ntd = new Array(); 새 TD 배열 생성
for(var i=0; i< colNum; i )...{ // 행의 TD 탐색
ntd[i] = nTR.insertCell() // 새로 생성 cell
ntd [i].id = TDs[0].id; // TD의 ID를 새 셀에 복사합니다. | 주의! TD의
//접미사는
ntd[i]입니다. innerHTML = TDs[i ].innerHTML; // 해당 TD에서 ntd[i]의 innerHTML 값을 복사합니다.
}

}
/**//* 이 함수는 지정된 테이블에서 지정된 행을 제거하는 데 사용됩니다.
* tabObj: 지정된 테이블
* targPos: 대상 행 위치
* btnObj: 현재 클릭된 이미지 삭제 버튼
*
*/
function deleteRow(tabObj, targPos,btnObj)...{ //테이블 행 제거
for(var i =0; iif(tabObj.getElementsByTagName ('img') [i]==btnObj)...{
tabObj.deleteRow(i targPos)
}
}
}



프런트엔드 코드 요약:
위 코드에서 주목해야 할 점은 원래 줄 에서 스타일을 표시로 설정했다는 것입니다. none , 이는 다음 js에서 행을 추가하는 데 newTD.innerHTML = sourceTD.innerHTML 메서드가 사용되기 때문입니다. 즉, 기존 열의 내용이 새로 추가된 열의 innerHTML 속성에 직접 복사되므로 "data 소스"가 숨겨져 있습니다. ""개체 제외" 오류로 인해 사용자가 열을 삭제할 수 없습니다.

VBScript 코드:

코드 복사 코드는 다음과 같습니다.

<%
'###### 트랜잭션 시작 #####
conn.beginTrans ' 트랜잭션 시작
sql = "UserInfo(username,sex) 값에 삽입("
sql=sql& "'"& request("이름") &"',"
sql=sql&"'"& request("Sex") &"')"
Response.Write sql&"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 = "ProjectInfo(uid,pname,pdesc,bdate,fdate) 값에 삽입("
sql=sql&""& maxid &", "
sql=sql&"'"& request("프로젝트 이름")(i) &"',"
sql=sql&"'"& request("Desc")(i) &"',"
sql =sql&"'"& request("BDate")(i) &"',"
sql=sql&"'"& request("FDate")(i) &"')"
Response.Write " "&sql&"
"
conn.execute(sql)
next
end if

if conn.Errors.count > 트랜잭션에서 오류가 발생하면 트랜잭션을 롤백합니다.
conn.RollBackTrans
else ' 오류가 아니면 트랜잭션을 커밋합니다.
conn.commitTrans
end if
conn.close
set conn = Nothing

%>

백엔드 코드 요약:
여러 데이터를 얻는 방법은 request("").count를 호출하고 개수를 사용하여 결정하는 것입니다. 메인 테이블에 삽입될 자식의 수. 테이블에는 횟수가 기록됩니다. 데이터 작업 횟수가 불확실하므로 데이터베이스 작업 수행 시 예외가 발생하여 데이터 불일치가 발생하는 것을 방지하기 위해. 우리는 거래 관리를 사용합니다. 트랜잭션 관리에는 원자성, 일관성 등의 특성이 있습니다. 데이터 보안이 보장될 수 있습니다. 데이터베이스 작업 시작 시 트랜잭션을 열기 위해 conn.beginTrans를 호출합니다. 데이터 작업이 끝나면 conn.Errors.count를 사용하여 트랜잭션 중에 오류가 발생했는지 여부를 확인합니다. .RollBackTrans가 롤백됩니다. 그렇지 않으면 트랜잭션을 커밋하고 데이터베이스 작업을 완료합니다.

미리보기:
그림 1: 데이터 채우기 페이지를 입력하고 추가 버튼을 클릭한 후 그림 2에 행을 추가합니다

그림 2: 행을 하나 더 추가하고 그림 3에 데이터를 입력합니다

그림 3: 두 행의 데이터를 추가한 후 제출 버튼을 클릭하여 데이터 제출

그림 4: 양식을 제출한 후 데이터베이스는 브라우저에 인쇄된 대로 여러 SQL 문을 실행하고 데이터가 데이터베이스에 성공적으로 추가됩니다.

요약:
이 글에서는 Javascript를 사용하여 프런트엔드에서 사용자 입력 데이터에 대한 열을 동적으로 추가하는 방법과 백엔드에서 ASP 기술을 사용하여 프런트엔드에 추가된 데이터를 데이터베이스에 삽입하는 방법을 설명합니다.
ASP와 Javascript를 배우시는 분들께 도움이 되었으면 좋겠습니다.
궁금한 점이 있으면 저에게 연락하세요. 이 글에 대해 어떤 의견이라도 있으시면 비판과 정정을 환영합니다!