Question

I have a html table which has several rows – lets say 17 for this example. On row 2, 9 and 15 I have some BOLD text which are basically headers for the rows after it. I’ve used the following code to add an IMAGE after each header:

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

I also have the following bit of code which binds a click event to each of the chart buttons.

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

At the moment, it simply displays the ID of the chart button. What I need to do is replace the alert to pull back the rows afters the header row that was clicked, upto the next header row, of until the end of the table, (whichever comes first). So if the first button was clicked then rows 3 to 8 will be pulled back. Once I have these I can then iterate through each of the TD cells to look at the data in the table.

Many thanks for any help on what “selectors” I need to use to pull back the correct rows. Also note that this needs to be dynamic as other tables will have different number of rows.

Thanks
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: You definitely should think about a more semantic markup using multiple <thead> and <tbody> tags if your table has multiple heads and bodies.

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

---

Edit: Changed answer to use nextUntil().