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>
<code class="javascript">$(this).nextUntil('tr.header').slideToggle(100).promise().done(function () { $this.find('span').text(function (_, value) { return value == '-' ? '+' : '-' }); });</code>
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!