Jquery、テーブル内の複数のTRを選択

Question

私はいくつかの行を持つhtmlテーブルを持っています - この例では17と言うことができます。 2行目、9行目、15行目には、基本的にBOLDテキストがあります。私は、各ヘッダの後に画像を追加するには、次のコードを使用しました：

$("#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)"); 
}); 

ところで 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

私の最初の本能は私が例えば一度それらのすべてを選択するのに役立ちクラスを宣言するだろう一緒に属している行のセットがある場合トーマラク（Tomalak）が示唆しているように、または複数のtheadと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