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

 

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

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

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

 

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

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

 

 

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 값을 지정하여

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