Jquery, 테이블에서 여러 TR 선택

Question

나는 여러 행을 가진 html 테이블을 가지고 있습니다 -이 예제에서는 17을 말합니다. 행 2, 9 및 15에는 기본적으로 굵은 텍스트가 있으며 그 뒤에는 행의 헤더가 있습니다. 나는 각 헤더 다음에 이미지를 추가하려면 다음 코드를 사용했습니다 :

$("#tblResults tr.lGreyBG td span.gridTXT b").each (function(index) { 
    $(this).after("&nbsp;<img class='ChartButton' id='c"+ index +"'src='Images//chart_bar.png' alt='Chart' width='20' />");     
}); 

나는 또한 차트의 각 버튼에 클릭 이벤트를 결합하는 다음과 같은 코드가 있습니다.

$("img.ChartButton").click(function(){ 
    alert ($(this).attr("id")); // THIS LINE WILL BE REPLACED 
}); 

지금은 차트 버튼의 ID 만 표시합니다. 내가해야 할 일은 클릭 한 헤더 행 이후의 행 머리글 행까지 테이블의 끝까지 (둘 중 먼저 발생하는 시점까지) 행을 되돌리려면 경고를 바꾸는 것입니다. 따라서 첫 번째 버튼을 클릭하면 3-8 행이 다시 당겨집니다. 일단 내가 가지고 있으면 각 TD 셀을 반복하여 테이블의 데이터를 볼 수 있습니다.

올바른 행을 가져 오는 데 "선택자"를 사용해야하는 데 많은 도움을 주신 데 대해 감사드립니다. 또한 다른 테이블의 행 수가 달라 지므로 동적이어야합니다.

감사

Answer 1

// notice that use after() directly, without each() 
$("#tblResults tr.lGreyBG td span.gridTXT b").after(function (index) { 
    return "<img class='ChartButton' id='c"+ index +"'src='Images//chart_bar.png' alt='Chart' width='20' />"; 
}); 

$("#tblResults").delegate("img.ChartButton", "click", function() { 
    var currentRows = $(this).closest("tr").nextUntil("tr:has(span.gridTXT b)"); 
}); 

BTW H : 당신은 확실히 여러 <thead>와 테이블이 여러 머리와 몸이있는 경우 <tbody> 태그를 사용하여 더 의미있는 마크 업에 대해 생각해야한다.

$("#tblResults thead span.gridTXT b").after(function (index) { 
    return "<img class='ChartButton' id='c"+ index +"'src='Images//chart_bar.png' alt='Chart' width='20' />"; 
}); 

$("#tblResults").delegate("img.ChartButton", "click", function() { 
    var currentRows = $(this).closest("thead").next("tbody").find("tr"); 
}); 

---

편집 : 변경 대답은 nextUntil()를 사용합니다.

Answer 2

함께있는 일련의 행이있는 경우 내 첫 번째 본능은 예를 들어 한 번에 모두 선택하는 데 도움이되는 클래스를 선언하는 것입니다.

<tr class="group-1"> ... </tr> 
<tr class="group-1"> ... </tr> 
<tr class="group-2"> ... </tr> 
<tr class="group-2"> ... </tr> 
... 

또는 Tomalak이 제안한 것처럼 여러 개의 theads 및 tbodies.

jQuery를 사용하여이 작업을 수행하려는 경우 nextAll()을 사용하여 헤더 뒤의 모든 행을 선택할 수 있습니다. 다음 제목 다음에 오는 모든 행을 필터링해야합니다. 아웃 포인트 인식은 "각()"부분을위한

var nextBlockAndTheRest = $(this). // create jQuery object out of this img 
          closest("tr"). // find the parent tr 
          nextAll("tr.lGreyBg"). // find all next lGreyBg rows 
          first("td span.gridTXT b"). // find the first with b 
          nextAll(). // select all following rows 
          andSelf(); // add the row with b 

var thisBlock = $(this). // create jQuery object out of the img 
       closest("tr"). // find the parent tr 
       nextUntil("td span.gridTXT b"). // select everything after the tr 
       andSelf(). // add the current block heading 
       not(nextBlockAndTheRest); // remove all the rest of the rows 

jsFiddle