테이블에 행 추가하는 이벤트

버튼을 클릭하여 테이블에 행을 추가하는 방법

 

테이블에 행 추가하기 - insertRow(), insertCell()

 

insertRow(), insertCell() 함수

테이블에 행(Row)를 추가하기 위해서는 insertRow(), insertCell() 함수를 사용합니다.

 

 insertRow() 

var newRow = HTMLTableElement.insertRow(index);

table element에 새로운 행을 추가해 줍니다.

 

파라미터(index)

• 새로 생성된 행(row)가 테이블에 들어갈 위치 index를 넣어줍니다.
• 파라미터를 입력하지 않으면 default 값은 '-1'이고, 
• 테이블의 가장 마지막에 새로운 행을 추가합니다.

 

리턴

• 새로 추가된 행(row)를 가리키는 reference를 나타냅니다.

 

 

 insertCell() 

var newCell = HTMLTableRowElement.insertCell(index);

• table row element에 새로운 cell을 추가해줍니다.
• 즉, insertRow()로 생성한 row에 cell을 추가해줍니다.

 

파라미터(index)

• 새로 만들어진 cell이 들어갈 위치를 지정해 줍니다.
• 파라미터가 입력되지 않으면 default 값은 '-1'이고,
• 행(Row)의 가장 뒤에 새로운 Cell을 추가합니다.

 

리턴

새로 추가된 Cell을 가리키는 reference를 나타냅니다.

 

 

예제1. 테이블의 끝에 새로운 행(row) 추가하기

 

function addRow() {
	//tabke element 찾기
    const table = document.getElementById('fruits');
    
    //새 행(Row) 추가
    const newRow = table.insertRow();
    
    //새 행(Row)에 Cell 추가
    const newCell1 = newRow.insertCell(0);
    const newCell2 = newRow.insertCell(1);
    
    //Cell에 텍스트 추가
    newCell1.innerText = '새 과일';
    newCell2.innerText = 'New Fruit';
}

• 위 두 함수, insertRow(), insertCell() 을 사용하여
• 버튼을 클릭할 때마다 테이블의 마지막 행에 새로운 행을 추가합니다.

 

예제2. 테이블의 중간에 새로운 행(row) 추가하기

 

function addRow() {
	// table element 찾기
    const table = document.getElementById('fruit');
    
    // 새 행(Row) 추가 (테이블 중간에)
    const newRow = table.insertRow(1);
    
    // 새 행(Row)에 Cell 추가
    const newCell1 = newRow.insertCell(0);
    const newCell2 = newRow.insertCell(1);
    
    // Cell에 텍스트 추가
    newCell1.innerText = '새 과일';
    newCell2.innerText = 'New Fruit';
}

• 이 예제는 새로운 행이 테이블의 두번째 줄에 추가되도록
• insertRow()를 호출할 때 파라미터로 1을 전달하였습니다.

(테이블 행의 index 값은 0부터 시작하므로, 파라미터로 1을 전달하면 두번째 줄에 추가됩니다.)

 

참고 : https://hianna.tistory.com/443

[Javascript] 테이블에 행 추가, 삭제하기 (버튼 클릭)