Javascript to check if is of a particular background colour

Question

Just getting to grips with javascript and jquery

I am setting backgroundColor of a table cell based on its value.

 $("td.ms-vb2").filter(function(index){return $(this).text() === "Yes";}).css("backgroundColor", "#81F79F");
 $("td.ms-vb2").filter(function(index){return $(this).text() === "No";}).css("backgroundColor", "#FE642E");

Could someone tell me how I would be able write an if-else statement where if the color is #81F79F do an alert and if the color is #FE642E, do another alert

OR

if the value in the cell is Yes do an alert and if the value in the cell is No, do another alert

Many thanks

You want those alerts to run when? They will run on a loop? Isn't this annoying ? — DontVoteMeDown, Oct 28 '15 at 16:08

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

Grab the color from the element, then check it as you wish. Since jQuery seems to return background-color as an rgb color, you would either have to convert it to hex, or check against the equivalent rgb.

Check out this question if you want a function to convert the color value.

var color = $('td.ms-vb2').css('background-color');
if (color == 'rgb(129,247,159)')
    alert('#81F79F');
else if (color == 'rgb(254,100,46)')
    alert('#FE642E');

Alternatively, you could do a similar bit of code to check the text (this is probably the easier solution in this case)

var value = $('td.ms-vb2').text();
alert(value == "Yes" ? "Yes!" : "No...");

edited May 23 '17 at 11:59

Community

1
1

answered Oct 28 '15 at 16:02

Andrew Brooke

12,073
8
39
55

Can you show how to get the background color in hex ? – DontVoteMeDown Oct 28 '15 at 16:04
Ah just realized that it returns in rgb, let me update my answer – Andrew Brooke Oct 28 '15 at 16:06

score 1 · Answer 2 · answered Oct 28 '15 at 16:02

your best bet is to probably add a class to the td if it is yes, or a different class if it is no. and then test basis existence of the class.

for example add the class affirmative or negative

then in your css have a style for affirmative or negative and declare the background-color there. that way, all your js needs to do is change the class

score 0 · Answer 3 · answered Oct 28 '15 at 16:12

You can use each() function to do all what you need:

Set cell background-color:

$('td.ms-vb2').each(function(){
    var cell = $(this)
    if (cell.text() == "Yes")
        cell.css('background-color', '#81F79F');
    else if (cell.text() == "No")
        cell.css('background-color', '#FE642E');        
});

Show alerts:

$('td.ms-vb2').each(function(){
    var color = $(this).css('background-color');
    if (color == '#81F79F')
        alert('#81F79F');
    else alert('another color');
});

Javascript to check if is of a particular background colour

3 Answers3