Javascript - 테이블 행(tr) 숨기기, 보이기

Javascripthtml

Javascript로 테이블의 행(<tr/>)을 동적으로 숨기거나 보이도록 변경하는 방법에 대해서 알아보겠습니다.

1. 테이블 행(tr) 숨기기/보이기

숨기기, 보이기 버튼을 누르면 테이블의 마지막 행(row)을 동적으로 숨기거나 보이도록 변경하는 예제입니다.

HTML

먼저 3명의 이름과 나이를 보여주는 테이블을 추가하였고, 그 아래에 행 숨기기, 보이기 버튼을 추가하였습니다. 버튼을 누르면 마지막 행(<tr/>)을 숨기거나 보이도록 구현하려고 합니다.

  • <table/> : 테이블
  • <th/> : 헤더 정보 (th: table header)
  • <tr/> : 행(row) 데이터 (tr: table row)
  • <td/> : 열(column) 데이터 (td: table data)
<table id="myTable">
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Alex</td>
    <td>28</td>
  </tr>
</table>

<button id="hideRowBtn">행 숨기기</button>
<button id="showRowBtn">행 보이기</button>

Javascript

먼저 숨기기, 보이기 버튼에 클릭 리스너를 추가합니다. 버튼이 클릭되면 함수가 호출되며, 마지막 행을 숨기거나 보이도록 구현하였습니다.

hideTableRow()를 보면

  • getElementsByTagName("tr") : 테이블 요소 아래의 모든 <tr/> 요소를 가져옴
  • rows[rows.length - 1].style.display = "none" : 마지막 행을 안보이도록 변경

showTableRow()를 보면

  • getElementsByTagName("tr") : 테이블 요소 아래의 모든 <tr/> 요소를 가져옴
  • rows[rows.length - 1].style.display = "" : 마지막 행을 보이도록 변경
const hideRowButton = document.getElementById("hideRowBtn");
const showRowButton = document.getElementById("showRowBtn");
hideRowButton.addEventListener("click", hideTableRow);
showRowButton.addEventListener("click", showTableRow);

function hideTableRow() {
  const myTable = document.getElementById("myTable");
  const rows = myTable.getElementsByTagName("tr");

  // 행이 1개라도 있는 경우
  if (rows.length > 1) {
    rows[rows.length - 1].style.display = "none";
  }
}

function showTableRow() {
  const myTable = document.getElementById("myTable");
  const rows = myTable.getElementsByTagName("tr");

  // 행이 1개라도 있는 경우
  if (rows.length > 1) {
    rows[rows.length - 1].style.display = "";
  }
}
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha