루프 및 토글 링 테이블 헤더

Question

나는 <theader> 테이블이 있습니다. 각 헤더 밑에서 PHP는 <tbody>을 생성합니다. 내 목표는 사용자가 표 머리글을 클릭하면 각 헤더 아래에있는 <tbody>을 전환하는 것입니다. 각 <theader>에는 고유 한 ID가 있으며 이에 해당하는 <tbody>도 있습니다. 예를 들어 머리글은 # GenEdCategory1이고이를 클릭하면 # GenEdCourses1이 토글됩니다. # GenEdCategory2 및 # GenEdCourses2에 대해 계속 ...

토글 링을 수행하기 위해 jQuery에 이러한 선택기를 사용했습니다.

하드 코드하면 제대로 작동합니다. # GenEdCategory1을 클릭하면 # GenEdCourses1이 토글됩니다. 하지만 나는 가져온 헤더의 수를 기반으로 동적으로 만들고 싶습니다. 아무 것도 할 수 없습니다!

while 루프를 사용하여 코드를 작성했지만 코드를 작성하면 작동이 멈 춥니 다. 어떤 통찰력이라도 대단히 감사하겠습니다! 건배 :)

var numberCategory = $('[id^=GenEdCategory]').length; //calculates number of GenEdCategories 
      var idCntr = 1;          //GenEdCategory ctr 
      var cool = "#GenEdCategory" + idCntr; //click on this to toggle 
      var cool2 = "#GenEdCourses" + idCntr; //I want to toggle this 

      while (idCntr < numberCategory) { 
       $(document).on("click", cool, function(){ 
       $(cool2).toggle(); 
      }); 
       idCntr = idCntr + 1; 
       cool = "#GenEdCategory" + idCntr; 
       cool2 = "#GenEdCourses" + idCntr; 
      }; 
      }; 
     }; 

여기에 테이블의 HTML 코드 조각은 내가 함께 일하고 있어요입니다 :

Answer 1

당신은 하나의 함수가 아닌 루프에 그것을 할 jQuery의 DOM 탐색 기능을 사용하고있을 수 있습니다 ID를 줄 필요가 없습니다.

$("thead").click(function() { 
    $(this).next("tbody").toggle(); 
}); 

BTW, <theader>는 <thead>해야한다.