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

jQuery로 테이블 행 확장 및 축소

문제:

테이블 행 확장 및 축소 특정 헤더 열을 클릭하면 클릭한 헤더 아래 행으로 확장/축소가 제한됩니다.

제안된 솔루션:

1. 헤더 식별 행: 헤더 행에 "header"와 같은 클래스를 추가합니다.
2. 확장/축소 전환: jQuery의 .nextUntil() 메서드를 사용하여 헤더 행 아래의 모든 행을 선택합니다. 다음 헤더가 나타날 때까지 헤더를 클릭했습니다. 그런 다음 .slideToggle()을 사용하여 해당 행의 표시 여부를 전환합니다.

코드 조각:

<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>

추가 기능:

• 확장/접기 아이콘: 헤더 셀 내의 범위 요소를 사용하여 확장 또는 축소 아이콘. 현재 상태에 따라 아이콘을 업데이트합니다.
• Promise 사용법: jQuery의 .promise() 메서드를 사용하여 애니메이션과 같은 비동기 작업을 처리합니다.
• CSS 의사 요소: CSS 의사 요소를 활용하여 확장/축소 표시기를 나타내고 헤더의 클래스를 전환하여 가시성을 제어합니다.

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