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

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

Barbara Streisand

풀어 주다： 2024-11-05 06:09:02

원래의

588명이 탐색했습니다.

How to Dynamically Expand and Collapse Table Rows with jQuery?

jQuery를 사용하여 동적으로 테이블 행 확장 및 축소

문제:

테이블 확장 또는 축소 특정 열 헤더를 클릭하면 행에 문제가 발생합니다. 이 작업을 단순화하기 위해 사용자 정의 CSS 클래스를 사용하여 각 헤더 내의 행을 구별할 수 있습니다. 그러나 여러 헤더에 대해 여러 CSS 클래스를 관리하는 것은 번거로울 수 있습니다.

해결책:

여러 CSS 클래스를 추적하는 복잡성을 피하기 위해 대체 접근 방식은 nextUntil( ) jQuery의 메소드. 이 방법은 다음 헤더 행이 나타날 때까지 클릭한 헤더 행 이후의 모든 행을 검색합니다.

코드 조각:

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

로그인 후 복사

HTML 구조:

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

로그인 후 복사

예:

이 예에서는 "header" 클래스가 헤더 행에 할당됩니다. 헤더 행을 클릭하면 SlideToggle() 메서드를 사용하여 바로 아래 행이 숨김과 표시 간에 전환됩니다.

추가 기능:

헤더 행 내의 범위 요소를 사용하여 행이 확장되거나 축소된 후 전환되는 " " 또는 "-" 기호를 표시할 수 있습니다.

<code class="javascript">$('.header').click(function(){
    $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
    $(this).nextUntil('tr.header').slideToggle(100);
});</code>

로그인 후 복사

범위를 전환하려면 전환이 완료된 후 아이콘/텍스트를 비동기식으로 사용하려면 SlideToggle() 메서드의 promise()를 사용하세요.

<code class="javascript">$(this).nextUntil('tr.header').slideToggle(100).promise().done(function () {
    $this.find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });
});</code>

로그인 후 복사

또는 CSS 의사 요소를 사용하여 확장/축소를 나타냅니다. 헤더에서 클래스 서명 및 전환:

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

로그인 후 복사

<code class="javascript">$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);</code>

로그인 후 복사

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