How do I select rows that correspond to a rowspan?

Question

I have a dynamically generated table that I am trying to change the background color of certain rows in. Sometimes there are rows with rowspans and I cant figure out how to get all of the rows that correspond to the one "row." I've googled my brains out and found this jsfiddle which is pretty close to what i need (in a logic sense)

http://jsfiddle.net/DamianS1987/G2trb/

basically i have something like this:

and I want to be able to highlight full rows at a time like this:

but the only highlighting i can achieve on rowspan rows is this:

Here is my code (different from jsfiddle but essentially same logic)

CSS:

.highlightedClass{
background-color: #AEAF93;
}

HTML:

<table border="1" class="altTable">
<th>ID</th>
<th>NAME</th>
<th>Miles</th>
<th>WORK</th>
<tbody>
    <tr>
        <td class="td_id">999B</td>
        <td class="td_name ">John</td>
        <td class="td_cumMiles">702.4</td>
        <td class="td_workEvent">Y</td>
    </tr><tr>
    <td class="td_id" rowspan="2">111A</td>
    <td class="td_name">Tom</td>
    <td class="td_cumMiles">446.5</td>
    <td class="td_workEvent">Y</td>
    </tr><tr>
    <td class="td_name">Becky</td>
    <td class="td_cumMiles">446.5</td>
    <td class="td_workEvent">A</td>
    </tr>
</tbody>

JAVASCRIPT:

for(var j=0; j < inspection.length; j++){
var $tr = $('<tr></tr>');
var $td_id = $('<td></td>').addClass('td_id').html(inspection.id);
$tr.append($td_id);
$table.append($tr);

$.each(inspection[i], function(index, value){
var $td_name, $td_miles,$td_workEvent;
if(index > 0){
    var $2nd_tr = $('<tr></tr>');

    $td_name = $('<td></td>').addClass('td_name').html(value.stationSt);
    $td_miles = $('<td></td>').addClass('td_miles').html(value.miles);
    $td_workEvent = $('<td></td>').addClass('td_workEvent').html(value.code);
    $2nd_tr.append($td_name);
    $2nd_tr.append($td_miles);
    $2nd_tr.append($td_workEvent);
    $table.append($2nd_tr);
    $td_id.attr('rowSpan',index+1);

    if($td_id.text() === content().id){
            $2nd_tr.addClass("highlightedClass");   
    }else{
        if($2nd_tr.hasClass("highlightedClass")){                    
            $2nd_tr.removeClass('highlightedClass');
        }
    }
    $('#workevent').on('click', function(){
            $tr.removeClass('highlightedClass');
    });
}else{
    $td_name = $('<td></td>').addClass('td_name').html(value.stationSt);
    $td_miles = $('<td></td>').addClass('td_miles').html(value.miles);
    $td_workEvent = $('<td></td>').addClass('td_workEvent').html(value.code);
    $tr.append($td_name);
    $tr.append($td_miles);
    $tr.append($td_workEvent);
    $table.append($tr); 

    if($td_id.text() === content().id){
        $tr.addClass("highlightedClass");
    }else{                              
        if($tr.hasClass("highlightedClass")){
            $tr.removeClass('highlightedClass');
        }
    }           
    $('#workevent').on('click', function(){
        $tr.removeClass('highlightedClass');            
    });  
}   
});

Answer 1

You need to look for any rowspan= attribute in the selected tds and if present, select the subsequent row(s) as well. This example should support any rowspan value (it appends subsequent rows based on the rowspan count):

Final version: JSFiddle: http://jsfiddle.net/TrueBlueAussie/G2trb/22/

$('td').bind('click', function () {
    var $row = $(this).closest('tr');

    // What row index is the clicked row?
    var row = $row.index(); // Subtract heading row

    // Does the clicked row overlap anything following?
    var rowspan = ~~$row.find('td[rowspan]').attr('rowspan') || 0;

    // Get all rows except the heading, up to the last overlapped row
    var $rows = $row.parent().children().slice(1, row + rowspan);
    row--; // Subtract the heading row we excluded

    // Now see if any preceding rows overlap the clicked row
    $rows.each(function (i) {
        var $tr = $(this);

        // Only check first rowspan of a row
        var rowspan = ~~$tr.find('td[rowspan]').attr('rowspan') || 0;

        // If the rowspan is before the clicked row but overlaps it
        // Or it is a row we included after the selection
        if ((i < row && ((rowspan + i) > row)) || i > row) {
            $row = $row.add($tr);
        }
    });
    $row.toggleClass('green');
});

First attempt JSFiddle: http://jsfiddle.net/TrueBlueAussie/G2trb/18/

$('td').bind('click', function () {
    var $td = $(this);
    var $row = $td.closest('tr');
    var $tds = $row.find('td');
    $tds.each(function(){
        var rowspan = ~~$(this).attr('rowspan');
        while (--rowspan > 0){
            $row = $row.add($row.next());
        }
    });
    $row.toggleClass('green');
});

It needs to be tweaked for the child row that sits under a previous rowspan, but am working on that too.

Notes:

• ~~ is a shortcut to convert a string to an integer.
• the || 0 converts undefined values to 0.
• $row = $row.add($tr) is appending row elements to a jQuery collection/object.