[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) 추가하기

<table id='fruits' border="1">
  <tr><td>사과</td><td>apple</td></tr>
  <tr><td>오렌지<td>orange</td></tr>
  <tr><td>바나나</td><td>banana</td></tr>
</table>
<input type='button' 
       value='행추가' 
       onclick='addRow()' />

function addRow() {
  // table 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) 추가하기

<table id='fruits' border="1">
  <tr><td>사과</td><td>apple</td></tr>
  <tr><td>오렌지<td>orange</td></tr>
  <tr><td>바나나</td><td>banana</td></tr>
</table>
<input type='button' 
       value='행추가' 
       onclick='addRow()' />

function addRow() {
  // table element 찾기
  const table = document.getElementById('fruits');
  
  // 새 행(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을 전달하면 두번째 줄에 추가됩니다.)

 

 

 

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

deleteRow() 함수

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

 

 deleteRow() 

HTMLTableElement.deleteRow(index)

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

 

파라미터

index

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

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

 

 

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

<table id='fruits' border="1">
  <tr><td>사과</td><td>apple</td></tr>
  <tr><td>오렌지<td>orange</td></tr>
  <tr><td>바나나</td><td>banana</td></tr>
</table>
<input type='button' 
       value='행삭제(끝에서)' 
       onclick='deleteRow(-1)' />
<input type='button' 
       value='행삭제(앞에서)' 
       onclick='deleteRow(0)' />

function deleteRow(rownum) {
  // table element 찾기
  const table = document.getElementById('fruits');
  
  // 행(Row) 삭제
  const newRow = table.deleteRow(rownum);
}

 

 

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

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

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

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

 

---

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