Change Row Color based on td value using Jquery

css, html, jquery, jsp

Solution

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.

Problem

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 ​` ``` <tr class="alt"> <td class="status"><input type="text" value="One"></td> <td class>Received</td> </tr> <tr class="alt"> <td class="status"><input type="text" value="One"></td> <td class>Received</td> </tr> <tr class="alt"> <td class="status"><input type="text" value="Zero"></td> <td class>Received</td> </tr> <tr class="alt"> <td class="status"><input type="text" value="One"></td> <td class>Received</td> </tr> <tr class="alt"> <td class="status"><input type="text" value="Zero"></td> <td class>Received</td> </tr> ``` ​` ``` $(document).ready(function() { $("tr.alt:even").css("background-color", "#f0f8ff"); $("tr.alt:odd").css("background-color", "#fcfceb"); }); $(document).ready(function() { $('.status.val():contains("Zero")').closest('tr.alt').css('background-color', '#cd0000'); }); ``` I wanna change the row color based on the input value `<td class="status"><input type="text" value="One"></td>` Here is a fiddle of what I've done so far Would appreciate the help.

Original source