Question

我有一個有幾行的html表 - 可以說這個例子是17。在第2,9和15行，我有一些BOLD文本，它們之後的行基本上是標題。我用下面的代碼的每個報頭之後添加一個IMAGE：

$("#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單元來查看錶中的數據。

非常感謝任何幫助，我需要用什麼「選擇器」來拉回正確的行。還要注意，這需要是動態的，因爲其他表將具有不同的行數。

感謝 ^ h

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：你一定要考慮使用多個<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