JavaScript에서 테이블 행 숨기기

클릭할 때 선택한 테이블 행을 숨기거나 표시하려면 행에 공통 클래스를 지정하고, jQuery로 해당 클래스를 선택하세요. 하나의 컨트롤로 표시 상태를 전환하려면 toggle()을 사용하고, 숨기기와 표시하기를 별도 컨트롤로 제공하려면 hide()와 show()를 사용하면 됩니다. 아래 예제는 jQuery를 한 번 불러와야 합니다. 브라우저 JavaScript도 DOM과 CSS를 통해 요소의 표시 상태를 바꿀 수 있으며, jQuery는 요소를 선택하고 업데이트하는 편리한 메서드를 제공합니다.

jQuery의 toggle() 함수로 JavaScript에서 테이블 행 숨기기

상세 행 묶음마다 카테고리 클래스를 지정하고, 해당 카테고리를 관련 컨트롤의 data-prod-cat 속성에 넣으세요. 이렇게 하면 각 컨트롤이 자신에게 해당하는 행에만 연결됩니다. 행은 style="display:none"으로 처음에 숨겨져 있어 jQuery의 표시 메서드로 나타낼 수 있습니다. 이 설정과 함께 행을 계속 숨기도록 강제하는 별도의 CSS 규칙은 사용하지 마세요. 클릭 핸들러는 앵커가 #로 이동하는 기본 동작을 막습니다.

예제처럼 $를 사용하는 코드보다 먼저 jQuery 스크립트를 불러오세요. 준비 콜백은 문서 마크업을 사용할 수 있을 때까지 기다린 다음 핸들러를 연결하지만, jQuery가 없거나 로드에 실패한 문제까지 해결하지는 않습니다. 카테고리를 더 추가할 때는 클래스 이름과 데이터 값을 일관되게 맞추세요. 값이 3이면 .cat3을 선택하므로 관련 없는 클래스가 붙은 행에는 적용되지 않습니다. 컨트롤이 버튼이라면 주변 폼을 제출하지 않도록 type="button"을 지정하세요.

이 예제를 실행하세요:

const rows = [
  { category: 1, visible: false },
  { category: 1, visible: false },
  { category: 2, visible: false }
];

function toggleCategory(category) {
  for (const row of rows) {
    if (row.category === category) row.visible = !row.visible;
  }
}

toggleCategory(1);
console.log(rows.map(row => row.visible ? "shown" : "hidden").join(", "));

shown, shown, hidden

이 간단한 JavaScript 예제는 카테고리가 일치하는 방식을 보여 줍니다. 브라우저에서는 jQuery로 같은 방식으로 테이블 행을 선택해 처리합니다:

<table>
  <tbody>
    <tr>
      <th scope="row">Oranges</th><td>100</td>
      <td><a href="#" class="toggler" data-prod-cat="1">Toggle oranges</a></td>
    </tr>
    <tr class="cat1" style="display:none"><td></td><td>120</td><td></td></tr>
    <tr class="cat1" style="display:none"><td></td><td>140</td><td></td></tr>
    <tr>
      <th scope="row">Apples</th><td>100</td>
      <td><a href="#" class="toggler" data-prod-cat="2">Toggle apples</a></td>
    </tr>
    <tr class="cat2" style="display:none"><td></td><td>120</td><td></td></tr>
    <tr class="cat2" style="display:none"><td></td><td>140</td><td></td></tr>
  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $(".toggler").on("click", function (event) {
    event.preventDefault();
    const category = $(this).attr("data-prod-cat");
    $(".cat" + category).toggle();
  });
});
</script>

선택자는 클릭한 링크의 카테고리를 바탕으로 만들어지므로, 예제에서 “Toggle oranges”라고 표시된 컨트롤을 클릭하면 .cat1에만 적용됩니다. 예제에 보이는 “Toggle oranges”와 두 번째 예제의 “Hide rows”, “Show rows” 레이블은 모두 영어로 표시됩니다. 같은 컨트롤을 다시 클릭하면 해당 행이 숨겨집니다. 모든 상세 행의 클래스는 카테고리 값과 정확히 일치해야 합니다. 클래스가 다르면 선택자가 해당 행을 찾지 못합니다. 컨트롤이 다른 곳으로 이동하지 않는다면 앵커 대신 <button type="button">을 사용하세요. 그러면 preventDefault()는 필요하지 않습니다. 행이 display:none 상태로 시작하므로 첫 클릭은 행을 표시하고, 다음 클릭은 다시 숨깁니다. 처음부터 행을 표시하려면 해당 초기 스타일을 제거하세요. 그러면 첫 클릭에서 행이 숨겨집니다.

jQuery의 show() 및 hide() 함수로 JavaScript에서 테이블 행 숨기기

클릭할 때마다 상태를 전환하는 대신 동작을 명확히 구분하려면 컨트롤을 각각 두세요. 두 컨트롤이 대상으로 삼는 행에 같은 클래스를 지정하고, 첫 표시 동작으로 행을 나타낼 수 있도록 처음에는 display:none으로 설정하세요. 처음부터 행을 표시하려면 이 스타일을 생략하면 됩니다. 그러면 숨기기 컨트롤이 첫 상태 변경을 담당합니다. 테이블에 여러 그룹이 있다면 .detail-row 대신 카테고리별 클래스를 대상으로 지정할 수 있습니다.

<table>
  <tbody>
    <tr><th scope="row">Oranges</th><td>100</td></tr>
    <tr class="detail-row" style="display:none"><td>Extra quantity</td><td>120</td></tr>
    <tr class="detail-row" style="display:none"><td>Reserve quantity</td><td>140</td></tr>
  </tbody>
</table>
<button id="hide-rows" type="button">Hide rows</button>
<button id="show-rows" type="button">Show rows</button>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  $("#hide-rows").on("click", function () {
    $(".detail-row").hide();
  });
  $("#show-rows").on("click", function () {
    $(".detail-row").show();
  });
});
</script>

hide()는 선택한 행의 표시 상태를 none으로 설정하고, show()는 테이블 행의 레이아웃에 맞는 표시 상태를 복원합니다. 행을 표시하는 일반적인 방법으로 display: block을 설정하지 마세요. 행의 기본 테이블 레이아웃이 유지되지 않습니다. 행이 처음에 숨겨져 있을 때 표시 컨트롤은 행을 나타내며, 다시 클릭해도 안전합니다. 숨기기 컨트롤은 행을 명시적으로 숨깁니다. 반면 toggle()은 클릭할 때마다 현재 상태를 반대로 바꾸므로 하나의 컨트롤로 상태를 전환할 때 적합합니다. 숨겨진 그룹을 언제든 다시 표시하는 기능처럼 사용자가 직접 명령을 선택해야 한다면 show()와 hide() 컨트롤을 따로 사용하세요.