CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Harag
Harag

Reputation: 1582

Jquery, selection several TRs in a table

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

Upvotes: 0

Views: 294

Answers (2)

Tomalak
Tomalak

Reputation: 338128

// 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().

Upvotes: 1

Aleksi Yrttiaho
Aleksi Yrttiaho

Reputation: 8446

If there is a set of rows that belong together my first instinct would be to declare classes that help me select all of them at once e.g. 

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

Or multiple theads and tbodies as Tomalak suggests.

If this is not possible and you want to do this using jQuery you can select all the rows after the header using nextAll(). You'll just have to filter out all rows that are after the next heading. 

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

Upvotes: 2

Related Questions