CODEWITHSUNDEEP
javascriptjquery
learning
learning

Reputation: 11725

How to look for all the rows in a rowspan and set a class to all the rows

I have a table 

<table border="1">
    <tr>
        <td rowspan="2">September</td>
        <td>Jim</td>
    </tr>
    <tr>
        <td>Dave</td>
    </tr>
    <tr>
        <td>October</td>
        <td>Fred</td>
    </tr>
</table>

using the code I am able to apply the class Red to the first row of the rowspan only, i.e, only Jim is being highlighed red and not Dave. I also want Dave to have the class Red...Please note I want to apply the class per row and not per cell.

var fullRowNumCells=1;

$('#table tr').each(function(){
    if( $(this).find('td').length==fullRowNumCells){

        if($.trim($(this).find('td:first').html()!=''))
        {

                $(this).addClass("red"); 
         }            
   }            
});

Upvotes: 4

Views: 1445

Answers (3)

martin
martin

Reputation: 2493

Keep it simple. For a table with n columns;

var n = 2;
var $rows = $('tr').addClass('red');

$rows.has(':nth-child(' + n + ')').removeClass('red');
$rows.has('[rowspan]').addClass('red');

Sometimes it's easier to think of what to take away then what to add http://jsfiddle.net/NV8uu/1/

Upvotes: 4

Jose Adrian
Jose Adrian

Reputation: 1247

here is your answer. Is not the best code but it does what you ask:

$(function(){
var fullRowNumCells=1;

    $('#table tr').each(function(){
        if( $(this).find('td').length==fullRowNumCells ||
            $(this).find('td:not([rowspan])').length==fullRowNumCells ){
            if($.trim($(this).find('td:first').html()!=''))
            {
                $(this).find('td:not([rowspan])').addClass("red"); 
            }            
       }            
    });

});

Demo: http://jsfiddle.net/bAFvT/

Update 2: Less code. Hope it helps you

$(function(){
    var fullRowNumCells=1;

    $('#table tr').each(function(){
        var hijos = $(this).children('td:not([rowspan])')
        if(hijos.length == fullRowNumCells)
        {
            hijos.addClass('red');
        }
    });
});

Demo: http://jsfiddle.net/bAFvT/2/

Update 3: Now I hope this is what you want.

$(function(){
    $('#table tbody tr').each(function(){
        $(this).children('td[rowspan]').each(function(){
            $(this).parent().addClass('red').next().find('td:not([rowspan])').addClass('red');
        });
    });
});

Demo: http://jsfiddle.net/yn6AK/1/

Upvotes: 1

Jamie Dixon
Jamie Dixon

Reputation: 53991

This should do what you're after. I'll put together a quick demo.

$("tr td:first-child").addClass('red');

UPDATE

Here's a working demo: http://jsfiddle.net/wTBe4/

UPDATE 2

Here's another example with your criteria that the cell contains some content:

$("tr td:first-child").addClass(function(){
    return $(this).text().length > 0 ? "red" : "";
});

http://jsfiddle.net/wTBe4/1/

UPDATE 3

An example with elements containing a rowspan being excluded:

$("tr td:first-child:not([rowspan])").addClass(function(){
    return $(this).text().length > 0 ? "red" : "";
});

http://jsfiddle.net/wTBe4/2/

Upvotes: 0

Related Questions