CODEWITHSUNDEEP
jqueryhtmlcss
AnonyMouse
AnonyMouse

Reputation: 18630

jQuery change table cell text color based on text

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?

Upvotes: 5

Views: 34516

Answers (6)

mindmyweb
mindmyweb

Reputation: 898

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

Then assign background color to that class.

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

}

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

Why do you need to use javascript for this in the first place?

If I am not mistaken, the above code is jQuery so don't forget to add the Lib if you use that.

Upvotes: 1

Keith.Abramo
Keith.Abramo

Reputation: 6955

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

Then you could have a .Paid class and a .Received class and set the css in those classes respectivly. This way if you ever wanted to change the css later it is abstracted away from the javascript. Also you could use these classes in other locations as well if need be.

Upvotes: 0

Abdullah Jibaly
Abdullah Jibaly

Reputation: 54790

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

Upvotes: 0

rogerlsmith
rogerlsmith

Reputation: 6786

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

warning_color = "#ffffff";

if (error_happened)
    warning_color = "#ffaaaa";

$("#input_box").css('background-color', warning_color);

Upvotes: 0

PeeHaa
PeeHaa

Reputation: 72662

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

With that selector you get a collection. And you do .html() on the first item in the collection.

You could loop through all status cells to check the status and change the color.

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

However this is not preferred (cause it is not needed). And it hurts performance.

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

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

So the best option (IMHO) is:

Why don't you just add two extra classes to the cells: status-received and status-paid since you already know the status of the cells while rendering them.

So you just could do:

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

Or drop the jQuery entirely (since we don't need it any more (unless we are going to change the cells dynamically)) and just style the two classes uses CSS.

Upvotes: 2

Clive
Clive

Reputation: 36956

This will work:

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

http://jsfiddle.net/MMEhc/

Upvotes: 11

Related Questions