[Javascript] 테이블에 열(column) 추가, 삭제하기

 

지난 번에는 테이블에 행(row)를 추가/삭제하는 방법을 알아보았습니다.

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

 

 

열(column) 추가하기

<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='addColumn()' />

function addColumn() {
  const table = document.getElementById('fruits');
  
  for(let i = 0; i < table.rows.length; i++)  {
    const newCell =table.rows[i].insertCell(-1);
    newCell.innerText = 'New';
  }
}

 

document.getElementById('fruits');

열을 추가할 테이블을 선택합니다.

 

table.rows.length;

테이블의 행(row)의 갯수를 구합니다.

for문으로 각 행(row)을 순회하면서, 새로운 cell을 추가할 것입니다.

[Javascript] 테이블 행 개수 구하기

 

const newCell = table.rows[i].insertCell(-1);

테이블의 각 행(row)마다 새로운 cell을 추가합니다.

insertCell()은 파라미터로, 새로운 셀을 추가할 위치 index를 입력받는데,

index는 0부터 시작하고, -1을 입력하면 가장 뒤에 새로운 cell을 추가합니다.

그리고, 새로 만들어진 cell을 리턴합니다.

 

newCell.innerText = 'New';

새로 만든 cell에 텍스트를 입력합니다.

 

 

 

열(column) 삭제하기

<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='deleteColumn()' />

function deleteColumn() {
  const table = document.getElementById('fruits');
  
  for(let i = 0; i < table.rows.length; i++)  {
    table.rows[i].deleteCell(-1);
  }
}

 

document.getElementById('fruits');

열을 삭제할 테이블을 선택합니다.

 

table.rows.length;

테이블의 행(row)의 갯수를 찾습니다.

각 행을 for문으로 순회하면서, 각 행의 cell을 삭제할 것입니다.

[Javascript] 테이블 행 개수 구하기

 

table.rows[i].deleteCell(-1);

for문으로 각 행을 순회하면서, 각 행(row)의 마지막 셀을 삭제합니다.

deleteCell()은 삭제할 cell의 index를 파라미터로 입력받는데,

index는 0부터 시작하고, -1이 입력되면 가장 마지막에 있는 셀이 삭제됩니다.