jQuery를 사용하여 테이블 행을 확장/축소하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

jQuery를 사용하여 테이블 행을 확장/축소하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-11-03 07:54:03

원래의

792명이 탐색했습니다.

How to Expand/Collapse Table Rows with jQuery?

jQuery로 테이블 행 확장/축소

헤더 클릭에 따라 테이블 행을 확장하고 축소하는 것은 웹 디자인의 일반적인 요구 사항입니다. 이 기사에서는 jQuery를 사용하여 이를 달성하는 방법을 살펴보겠습니다.

다음 테이블 구조가 주어진 경우:

<code class="html"><table>
  <tr>
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table></code>

로그인 후 복사

각 헤더 행에 고유한 클래스를 할당하여 이 작업에 접근할 수 있습니다. 헤더를 클릭하면 nextUntil 메소드를 사용하여 다음 헤더까지 그 아래의 모든 행을 선택할 수 있습니다. 이를 통해 클릭한 헤더를 기준으로 관련 행만 축소하거나 확장할 수 있습니다.

다음은 이 동작을 구현하는 간단한 jQuery 코드 조각입니다.

<code class="js">$('.header').click(function(){
    $(this).nextUntil('tr.header').slideToggle(1000);
});</code>

로그인 후 복사

이 코드에서는 헤더 클래스가 있는 모든 요소에 클릭 이벤트를 첨부합니다. 헤더를 클릭하면 다음 헤더까지 모든 후속 행을 찾고 SlideToggle을 사용하여 표시 여부를 전환합니다.

대체 방법

또 다른 옵션은 다음을 제공하는 SlideToggle 대신 토글 방법을 사용하는 것입니다. 더 간단한 구현:

<code class="js">$('.header').click(function () {
    $(this).toggleClass('expand');
    $(this).nextUntil('tr.header').toggle();
});</code>

로그인 후 복사

여기서 클릭한 헤더의 확장 클래스를 토글하고 토글을 사용하여 모든 후속 행의 표시를 토글합니다.

마지막으로 CSS 의사 요소도 가능합니다. 확장/축소 상태를 보다 시각적으로 표현하는 데 사용됩니다.

<code class="css">.header .sign:after {
  content: "+";
  display: inline-block;
}

.header.expand .sign:after {
  content: "-";
}</code>

로그인 후 복사

<code class="js">$('.header').click(function () {
    $(this).toggleClass('expand');
    $(this).nextUntil('tr.header').slideToggle(100);
});</code>

로그인 후 복사

이 버전에서 확장 클래스는 CSS 의사 요소에 의해 표시되는 기호도 플러스에서 마이너스로 변경합니다. 행 상태를 시각적으로 표시합니다.

위 내용은 jQuery를 사용하여 테이블 행을 확장/축소하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!