javascript - How do I select rows that correspond to a rowspan?

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)

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');            
    });  
}   
});

http://jsfiddle/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');            
    });  
}   
});

Share Improve this question edited Jul 26, 2018 at 7:53 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jul 9, 2014 at 20:13 user2847749 3692 gold badges9 silver badges28 bronze badges

1 You need to look for any rowspan= attribute in the selected tds and if present, select the subsequent row(s) as well. – iCollect.it Ltd Commented Jul 9, 2014 at 20:17
Took a lot of fiddling, but got it working for all cases. Answer updated below. Enjoy :) – iCollect.it Ltd Commented Jul 9, 2014 at 21:23

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

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

In fixing my issue (going off what TrueBlueAussie gave me) I came up with the following solution.

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().td_id){
            $2nd_tr.addClass("highlightedClass");   
    }else{
        if($2nd_tr.hasClass("highlightedClass")){                    
            $2nd_tr.removeClass('highlightedClass');
        }
    }
    $('#workevent').on('click', function(){
                if($td_id.text() === content().td_id){
                                $2nd_tr.addClass("highlightedClass");   
                            }else{
                                if($2nd_tr.hasClass("highlightedClass")){
                                    $2nd_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');
        }
    }                   
}   
});

This was in a nested if statement. below like three if statements, i put this:

       $('#workevent').on('click', function(){                  
    var flag= false;
    $('#altTable > tbody  > tr').each(function() {
        $td_id= $(this).find('.td_id');
        if($td_id.text() === ''){
            if(flag === true){
                $(this).addClass("highlightedClass");
                flag = true;
            }
        }else{
            if(if($td_id.text() === content().idtd_id{){
                if($(this).hasClass("highlightedClass")){
                    flag = true;
                }else{
                    $(this).addClass("highlightedClass");
                    flag = true;
                }
            }else{
                flag = false;
                if($(this).hasClass("highlightedClass")){     
                    $(this).removeClass("highlightedClass");

                }
            }
        }

    });
});

This is what worked for me. I selected TrueBlueAussie's answer because it helped get me my specific answer. Hopefully both answers can help someone else in the future.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745271168a4619755.html

javascript - How do I select rows that correspond to a rowspan? - Stack Overflow

2 Answers 2

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

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

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How do I select rows that correspond to a rowspan? - Stack Overflow

2 Answers 2

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

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

相关推荐