jQuery change table cell text color based on text

Question

I have a table which has columns of data that contain status. Two example statuses would be "Rejected" and "Paid"

What I'm wanting to do is changed the text color of the "Rejected" to red and the color of the "Paid" to green.

For the cells that have this status I added a classs to the td like:

<td class="status">
    @Html.DisplayFor(modelItem => item.Status)
</td>

So I can easily identify it.

I found I could change the color of all the statuses to Red using:

$('.status').css("color", "red");

Also I could get the value of the first one by:

alert($('.status').html());

However I'm unsure how to set a status color based on its text. ie for all "Received" set color to red and for all "Paid" set color to green.

Can somebody enlighten me on how to achieve this?

Am I even following the right approach using jQuery or is there a better css way?

Answer 1

This will work:

$('.status:contains("Paid")').css('color', 'red');
$('.status:contains("Received")').css('color', 'green');

http://jsfiddle.net/MMEhc/