[Javascript] 테이블 행 숨기기/보이기 (display)

 

지난번에는 테이블의 행을 삭제하고 추가하는 방법을 알아보았습니다.

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

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

 

이번에는 버튼을 클릭 했을 때,

테이블의 행을 숨기거나, 보여주는 방법을 정리해 보겠습니다.

 

 

display 스타일 속성 사용하여 행 숨기기/보이기

<table id='fruits' border="1">
  <tr><td>사과</td><td>apple</td></tr>
  <tr id='orange'><td>오렌지<td>orange</td></tr>
  <tr><td>바나나</td><td>banana</td></tr>
</table>
<input type='button' 
       value='오렌지 행 숨기기' 
       onclick='hideRow()' />
<input type='button' 
       value='오렌지 행 보이기' 
       onclick='showRow()' />

function hideRow()  {
  const row = document.getElementById('orange');
  row.style.display = 'none';
}

function showRow()  {
  const row = document.getElementById('orange');
  row.style.display = '';
}

위 예제는 '오렌지 행 숨기기' 버튼을 클릭하면, 오렌지 행을 숨기고,

'오렌지 행 보이기' 버튼을 클릭하면, 오렌지 행을 다시 보여주는 예제입니다.

 

 행 숨기기   - hideRow()

const row = document.getElementById('orange');

id로 숨길 행을 선택합니다.

 

row.style.display = 'none';

선택한 행의 style.display 값을 'none'으로 설정합니다.

 

 

 행 보이기   - hideRow()

const row = document.getElementById('orange');

행 숨기기와 같이, 다시 보여질 행을 id를 이용하여 선택합니다.

 

row.style.display = '';

선택한 행의 style.display 값을 ''으로 설정합니다.

 

---

 

style.display 값을 지정하여

간단하게 테이블의 행을 숨기고, 다시 보여주는 방법을 알아보았습니다.