jQuery를 사용하여 동적 테이블 행 확장을 구현하는 방법은 무엇입니까?

jQuery를 사용한 동적 테이블 행 확장

테이블 형식 데이터로 작업할 때 필요에 따라 행을 확장 및 축소하는 기능은 사용자 상호 작용을 크게 향상시킬 수 있습니다. . 이 시나리오에서는 특정 헤더 열을 클릭할 때 이 기능을 달성하기 위한 솔루션을 모색합니다.

클래스 구별 방식

한 가지 접근 방식은 고유한 클래스를 할당하는 것입니다. 각 헤더에 속하는 행에. 헤더를 클릭하면 jQuery를 사용하여 연관된 행을 찾고 SlideToggle() 효과를 적용하여 이를 확장하거나 축소할 수 있습니다. 이 방법은 효과적이지만 헤더가 많아 여러 CSS 클래스를 관리하는 것이 번거로울 수 있습니다.

대체 접근 방식: nextUntil()

jQuery의 nextUntil() 함수를 활용하는 더 간단한 대안 . 헤더 행에 "헤더" 클래스를 추가하면 다음 코드를 사용할 수 있습니다.

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

이 기능을 사용하면 다른 헤더가 나타날 때까지 클릭한 헤더 아래의 테이블 행을 탐색할 수 있습니다. 그런 다음 SlideToggle() 효과가 일치하는 행에 적용되어 원하는 확장/축소 기능을 제공합니다.

데모 및 변형

제공된 HTML 및 JavaScript 코드가 이를 보여줍니다. 접근하다. 추가 예에서는 헤더 내의 범위 요소를 사용하여 확장/축소를 나타내는 '' 또는 '-' 아이콘을 표시하는 방법을 보여줍니다.

보다 동적인 효과를 위해 프로미스를 사용하여 아이콘/축소를 전환할 수 있습니다. 애니메이션 전환의 경우 토글이 완료된 후의 텍스트입니다.

또는 CSS 의사 요소를 사용하여 확장/축소 기호를 나타낼 수 있습니다. 헤더를 클릭하면 헤더에서 클래스가 전환되고 그에 따라 표 행이 확장되거나 축소됩니다.

이러한 기술은 헤더 클릭에 응답하여 표 행을 확장/축소하는 유연하고 효율적인 방법을 제공합니다.

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