jquery 테이블에서 하위 행을 숨기는 방법

웹사이트 개발에서 테이블은 데이터를 표시하는 일반적인 형식인 경우가 많습니다. 그러나 세부 데이터를 표시하기 위해 테이블에 하위 행을 포함해야 하는 경우도 있습니다. 처음에 이러한 하위 행을 모두 확장하지 않으려면 하위 행을 숨기고 필요할 때 표시하는 메서드를 구현해야 합니다.

다행히도 jQuery는 이 기능을 달성하는 데 도움이 되는 매우 편리한 방법을 제공합니다. 다음으로 몇 가지 간단한 코드를 사용하여 하위 행을 숨기고 표시할 수 있는 jQuery 테이블을 구현하겠습니다.

HTML 필요

이 예에서는 간단한 테이블을 사용하여 일부 데이터를 표시합니다. 테이블은 헤더와 본문이라는 두 가지 주요 부분으로 구성됩니다. 그중 테이블 본문 부분에는 하위 행을 추가하는 데 필요한 데이터가 포함되어 있으며, 여기에 세부 데이터를 표시하기 위해 몇 가지 새로운 행을 추가할 것입니다.

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>555-1234</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Doe</td>
      <td>jane@example.com</td>
      <td>555-5678</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bob Smith</td>
      <td>bob@example.com</td>
      <td>555-9101</td>
    </tr>
  </tbody>
</table>

하위 행 숨기기

먼저 테이블 본문에 새 행을 추가해야 합니다. 이 행은 사용자가 기본 행을 클릭할 때까지 숨겨진 하위 행 역할을 합니다. 다음 HTML 코드를 사용하여 추가 세부 데이터를 표시하기 위해 새 행을 추가합니다.

<tr class="expandable">
  <td colspan="4">
    <p>
      This is some additional data that will be hidden until the main row is clicked.
    </p>
  </td>
</tr>

보시다시피 클래스 이름 expandable을 사용하여 이 새 행이 확장 가능함을 나타냅니다. 열 수를 4개로 설정하면 하위 행의 너비가 기본 행과 동일해집니다. expandable来表示这个新的行是可伸缩的，同时我们将它的列数设为了4，这样子行的宽度将与主行相同。

然后，我们将这些新的行隐藏起来，这样在页面加载时用户并不会看见它们。我们可以使用以下CSS代码来实现：

tr.expandable {
  display: none;
}

现在，网页加载时我们已经成功的将子行隐藏起来了，接下来我们需要添加一些代码来实现点击主行时显示子行的功能。

显示子行

在这个例子中，我们将通过单击主行来展开子行。此时我们将使用jQuery，利用click()函数监听用户的点击事件，这时就能够实现主行所对应的子行的展开和收起操作。

$(document).ready(function() {
  $('table').on('click', 'tr', function() {
    var expandable = $(this).next('.expandable');
    expandable.toggle();
  });
});

我们使用$(document).ready()来确保页面中的所有元素都已经被完全加载，然后对整个表格对象进行了click()事件的监听。在用户点击表格的行时，我们会获取下一行的内容，即我们预先添加的那些可展开子行，并通过jQuery的toggle()

그런 다음 페이지가 로드될 때 사용자가 볼 수 없도록 새 행을 숨깁니다. 이를 달성하기 위해 다음 CSS 코드를 사용할 수 있습니다.

rrreee

이제 웹 페이지가 로드될 때 하위 행을 성공적으로 숨겼으므로 기본 행을 클릭할 때 하위 행을 표시하는 코드를 추가해야 합니다.

하위 행 표시

이 예에서는 기본 행을 클릭하여 하위 행을 확장하겠습니다. 이 시점에서는 jQuery를 사용하고 click() 함수를 사용하여 사용자의 클릭 이벤트를 모니터링합니다. 이때 기본 행에 해당하는 하위 행을 확장하고 축소할 수 있습니다. 🎜rrreee🎜$(document).ready()를 사용하여 페이지의 모든 요소가 완전히 로드되었는지 확인한 다음 전체 테이블 개체 이벤트를 click()합니다. 모니터링. 사용자가 테이블의 행을 클릭하면 다음 행의 내용, 즉 미리 추가한 확장 가능한 하위 행의 내용을 가져오고 jQuery의 toggle()을 통해 확장하거나 축소합니다. > 기능. 🎜🎜위 코드를 사용하면 하위 행 확장 기능을 구현할 수 있습니다. 🎜🎜요약🎜🎜이 기사에서는 jQuery를 사용하여 테이블의 하위 행을 구현하고 확장 및 축소 작업을 수행하는 방법을 보여주었습니다. 동적 HTML 및 CSS 코드를 추가하여 하위 행을 성공적으로 숨기고 사용자가 기본 행을 클릭하면 표시합니다. 이러한 간단한 단계는 모든 웹사이트 양식 개발에 쉽게 적용되어 웹사이트에 더 나은 사용자 경험을 제공할 수 있습니다. 🎜

위 내용은 jquery 테이블에서 하위 행을 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!