jquery_jquery를 사용하여 테이블에 행을 동적으로 추가하는 구현 코드

여기서는 jquery를 사용하여 수행됩니다. 키 코드는 다음과 같습니다.

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

// 데이터 행 추가;
function AddRow(){
var vTb=$("#TbData");//테이블 ID=TbData인 jquery 객체 가져오기
//모든 데이터 행에는 .CaseRow 클래스가 있습니다. , 데이터 행 크기 가져오기
var vNum=$("#TbData tr").filter(".CaseRow").size() 1;//테이블에 있는 데이터 행 수
var vTr= $("#TbData #trDataRow1 "); //테이블의 첫 번째 데이터 행 가져오기
var vTrClone=vTr.clone(true); //첫 번째 행의 vTrClone 복사 개체 생성
vTrClone[ 0].id="trDataRow" vNum ;//첫 번째 ID를 현재 획득 인덱스로 설정합니다. ID가 trDataRow1인 여러 데이터 행을 반복적으로 추가하는 것을 방지합니다.
vTrClone.appendTo(vTb);/ /테이블 아래에 복사 셀 개체 추가
}

이 방법은 주로 jquery의 clone 기능을 사용하여 테이블의 행 복사본을 복제합니다. 그런 다음 원본 테이블에 추가합니다.
삭제 메소드 키 코드:

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

var vNum=$ ("#TbData tr").filter(".CaseRow").size() 1;//테이블에 포함된 데이터 행 수
if(vNum<=2)
{
alert(' 한 줄 이상 남겨주세요');
return;
}
var vbtnDel=$(this);//클릭한 버튼 객체 가져오기
var vTr=vbtnDel.parent ("td").parent ("tr");//상위 tr 객체 가져오기
if(vTr.attr("id")=="trDataRow1")
{
alert(' 첫 번째 행은 삭제할 수 없습니다!') ; //첫 번째 줄은 복제의 기준이므로 삭제할 수 없습니다.
return
}else{
vTr.remove()