JQuery 테이블 토글 행 문제

Question

동적으로 생성되는 테이블이 있습니다. ID 필드와 같은 테이블에 더 이상 특성을 갖지 않으려합니다. 각 행의 TD 중 하나에서 모든 TableRow를 확장 할 수 있어야하며 클릭시 축소해야하는 다단계 테이블입니다.

$('.fylke_click').click(function() { 
    $(this).parent().nextUntil('.fylke').slideToggle(0); 
    $('.sted').hide(); 
}); 

$('.kom_click').click(function() { 
    $(this).parent().nextUntil('.kommune').slideToggle(0); 
}); 

이 단순화 된 바이올린 참조 : http://jsfiddle.net/T2Lwn/

그래서 기본적으로 3 단계의를 그리고 여기 많은 문제입니다. 두 번째 레벨 인 "kommune"에 마지막 버튼을 클릭하면 밑의 "fylke"가 제거됩니다. "MIDTRE GAULDAL"을 클릭하면 볼 수 있듯이 이것은 아마도 .Parent()을 사용하고 있기 때문에 내가 마지막 행에 있는지 확인하려면 일종의 필요가 있습니까?

이 코드의 다른 문제가 있습니까? 보다 일반적인 수준에서 클릭 방법 class="fylke_click" 및 class="kom_click"을 지정할 수 있습니까? 예를 들어 모든 <tr class="fylke">에 대해 각 TD 클래스는 class="fylke_click"이고 kommunne?

Answer 1

나는 당신의 문제를 이해한다면 올바르게 도움이 될 수 있습니다 :

Demo Fiddle:

당신이, 내가 메인 테이블 떨어져 위임 추천 할 것입니다 동적으로 컨텐츠를 생성하는 것 대신하고 말했다 때문에 각 행에 대해 클릭 핸들러를 작성합니다. 또한 표시/숨기기를 원하는 모든 항목이 형제이며 중첩되지 않으므로 상황이 다소 까다로워집니다. .nextUntil()에 필터를 지정하여 구체적이어야하며 필터에 :not()이 필요하다는 것을 알았습니다.

다시 말하지만, 이들은 모두 형제이기 때문에 머리글 행의 자식을 숨기는 것만 큼 쉽지 않으므로 헤더가 열려 있는지 여부를 확인하는 "열린"클래스를 설정하고 숨김/표시되는 항목을 표시합니다. 이미 열려 있다면. JS :

$('.kommune').hide(); 
$('.sted').hide(); 

$('.table').on('click', 'tr', function(){ 
    $this = $(this); 

    if($this.hasClass('fylke')){ 
     if ($this.hasClass('open')) { 
      $this.toggleClass('open').nextUntil('.fylke', 'tr').hide(); 
     } 
     else { 
      $this.toggleClass('open').nextUntil('.fylke', 'tr:not(.sted)').toggle(); 
     } 
    } 
    else if ($this.hasClass('kommune')){ 
     $this.nextUntil('.kommune', 'tr:not(.fylke)').toggle(); 
    } 
});