테이블rows_jquery를 동적으로 추가하고 삭제하는 JQuery 메서드

이 문서의 예에서는 JQuery를 사용하여 테이블 행을 동적으로 추가하고 삭제하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

어제 페이지에서 테이블 행의 동적 추가 및 삭제를 수행하던 중 수많은 소개를 읽다가 좋은 점, JQuery를 발견했습니다. 구현하는 것이 정말 편리합니다. 이것이 제가 우리 플랫폼을 사용하는 방법 중 하나입니다.

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

//추가된 줄 수를 기록합니다
var AreaCount=1;
//실제 테이블 행 수를 기록합니다
var rowCount=1;
//템플릿 html 삭제
var delRowTemplete = "삭제"; 🎜> //테이블 행 템플릿
var addRowTemplete= "";
$(함수(){
//먼저 복제해야 할 템플릿을 꺼냅니다. 템플릿 행id는 rowTemplete_0
입니다. addRowTemplete= $("#rowTemplete_0").html();
});
//행 추가
함수 addBatchRow(유형){
var Templete = $("");
//일련번호를 증가시키고 tr 또는 td에서 [0], _0 또는 (0)을 대체하여 동일한 ID를 방지합니다. 이 디자인은 주로 배경 값의 편의를 위한 것입니다
Templete = Templete.append(addRowTemplete.replace(/[0]/g,"["areaCount "]").replace(/_0/g,"_"areaCount).
replacement("processStat("0")","processStat("areaCount")"));
//마지막 기존 줄을 찾아 그 뒤에 줄을 연결합니다
var 플래그 = false;
for(var i=areaCount-1;i>=0;i--){
if($("#rowTemplete_" i).length>0){ $("#rowTemplete_" i).after(templete.append(delRowTemplete));
휴식;}
}
//더하기 1
면적카운트 ;
}
//행 삭제
함수 deleteBatchRow(obj){
if(rowCount>1) {
$(obj).parents("tr").remove()
rowCount--;
} else Alert("최소 하나의 행 유지");//모두 삭제되면 더 이상 행을 추가할 수 없으며 템플릿 행도 삭제됩니다
}
//항목 개수 가져오기
함수 getAreaCount(){
rowCount를 반환합니다.
}

또한 백그라운드에서 사용하기가 상대적으로 쉽습니다. FormBean에서 배열 변수를 정의하여 가져오고 설정하는 것이 매우 편리합니다.
이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.