Text based jQuery change table cell text color

Question

I have a table with data columns that contain status. The two status statuses can be “Rejected” and “Paid”

What I want to do is change the color of the Rejected text to red and the Paid color to green.

For cells that have this status, I added classes to td as:

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

Therefore, I can easily identify it.

I found that I can change the color of all statuses to red using:

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

Also I could get the value of the first:

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

However, I am not sure how to set the status color based on its text. those. all Accepted colors are set to red, and all Accepted colors are set to green.

Can someone enlighten me on how to achieve this?

Am I even following the correct 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/

Answer 2

Also I could get the value of the first with ...

With this selector you get a collection. And you do .html() on the first element of the collection.

You can skip all status cells to check status and change color.

 $('.status').each(function() { // check text and do styling }); 

However, this is not preferred (because it is not necessary). And it harms the work.

You can also use jQuery .contains() for this ( http://api.jquery.com/contains-selector/ ).

Also not needed. And I think that not the best performance option is wise.

So the best option (IMHO):

Why don't you just add two additional classes to the cells: status-received and status-paid , since you already know the status of the cells when they are rendered.

So you could do:

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

Or completely discard jQuery (since we no longer need it (unless we are going to dynamically change cells)) and just the style of the two classes uses CSS.

Answer 3

If you are printing a table from a database, just assign the td class based on the result.

Then assign the background color to this class.

 td.paid { display:block; background-color:red; } td.recieved { display:block; background-color:green; } 

Why do you use javascript first?

If I'm not mistaken, the above code is jQuery, so be sure to add Lib if you use it.

Answer 4

I recently had to do something similar. I needed to change the background color to red (well, pinkish) when an error occurred, and leave it white when everything was fine. Here is my code:

 warning_color = "#ffffff"; if (error_happened) warning_color = "#ffaaaa"; $("#input_box").css('background-color', warning_color); 

Answer 5

 $('td.status').each(function() { if ($(this).text() == 'Received') { $(this).style('color', 'red'); } // similarly for other statuses }); 

Answer 6

 $('.status').addClass($(".status").html()); 

Then you could have a .Paid class and a .Received class and treat css in these classes with respect. Thus, if you ever wanted to change css later, it is distracted from javascript. You can also use these classes in other places, if necessary.