Change Row Color Based On Td Value Using Jquery

I have a table that gets populated from a database. I have 2 conditions that i need to apply Apply Zebra striping to the Table (Completed) Change Row color to red based td value

Solution 1:

Try this,

Live Demo

$('td.status[value=Zero]').css('background-color', 'red');

Edit: Based on comments and change in OP

To change the whole row with the given criteria of td you can do it this way.

Live Demo

$('td.status[value=Zero]').closest('tr').css('background-color', 'red');

Solution 2:

To change the tr (you're using v 1.6.4 instead of latest so we need bind instead of on)

$(document).ready(function(){

    $("tr.alt:even").addClass("even");
    $("tr.alt:odd").addClass("odd");
    $('td.status input').bind('change keyup', function(){
        var tr=$(this).closest('tr');

        if ($(this).val()=='Zero') tr.addClass('zero');       
        else tr.removeClass('zero');

    }).trigger('change'); // the trigger is to run this action on load
});
​
tr.odd
{
    background-color:#fcfceb;
}

tr.even
{
    background-color:#f0f8ff;
}

tr.odd.zero
{
    background-color:#ff0000;
}
tr.even.zero
{
    background-color:#cc0000;
}

Your HTML is a bit messed up though. You have missing quotes and <td class> is invalid.

http://jsfiddle.net/MMEhc/158/

EDIT: Updated version to suit the values being changed manually, not just those that are outputted (as I understood the question to be)

http://jsfiddle.net/MMEhc/159/

You'll see I moved the background colours out of the HTML and into the CSS to make it easier to manipulate. I also adjusted the red for even or odd rows.