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

 

이번에는 버튼을 클릭하여

테이블에 행을 추가하고 삭제하는 방법을 알아보도록 하겠습니다.

 

1. 테이블에 행 추가하기 - insertRow(), insertCell()
2. 테이블에 행 삭제하기 - deleteRow()

 

1. 테이블에 행 추가하기 - 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) 추가하기

 

 

위 두 함수, insertRow(), insertCell() 을 사용하여

버튼을 클릭할 때마다 테이블의 마지막 행에 새로운 행을 추가합니다.

 

 

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

이 예제는 새로운 행이 테이블의 두번째 줄에 추가되도록

insertRow()를 호출할 때 파라미터로 1을 전달하였습니다.

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

 

 

 

2. 테이블에 행 삭제하기 - deleteRow()

deleteRow() 함수

테이블에서 행을 삭제하기 위해서 deleteRow() 함수를 사용할 수 있습니다.

 

 deleteRow() 

HTMLTableElement.deleteRow(index)

테이블의 행을 삭제합니다.

 

파라미터

index

index로 전달된 위치의 행을 삭제합니다.

'-1'이 파라미터로 전달되면 테이블의 가장 마지막 행이 삭제됩니다.

 

 

예제. 테이블 행 삭제 (앞에서 삭제, 끝에서 삭제)

 

 

테이블의 가장 마지막 행(row)을 삭제하기 위해서 

deleteRow() 함수에 파라미터로 '-1'을 전달하였고,

가장 첫번째 행(row)을 삭제하기 위해서

deleteRow() 함수에 파라미터로 '0'을 전달하였습니다.

 

---

테이블에 새로운 행을 추가하는 방법과 삭제하는 방법을 알아보았습니다.