Change color related on value

Question

I have table values populated from back-end

Here is js function that doing it.

function AllProposals() { let getProposalsUrl = '/proposals/index'; $.ajax({ url: getProposalsUrl, contentType: 'application/json; charset=utf-8', type: 'GET', dataType: 'json', processData: false, success: function (data) { $("#proposals").empty(); var list = data; for (var i = 0; i <= list.length - 1; i++) { var tableData = '<tr>' + '<td class="proposalId">' + list[i].Id + '</td>' + '<td > ' + list[i].Project + '</td>' + '<td > ' + moment(list[i].DateFrom).format('DD/MM/YYYY') + "--" + moment(list[i].DateTo).format('DD/MM/YYYY') + '</td>' + '<td> ' + list[i].WorkTime + "--" +list[i].WorkTimeTo + '</td>' + '<td > ' + list[i].Quantity+ '</td>' + '<td> ' + list[i].Service + '</td>' + '<td> ' + list[i].Price + '</td>' + '<td> ' + list[i].Status + '</td>' + '</tr>'; $('#proposals').append(tableData); } } }) }

It working great.

Bu It need to check this value on flight

'<td> '+list[i].Status+'</td>' +

And if it is "Rejected" change text color to red.

How I can do this correctly?

Thank's for help.

You need to add an Minimal, Complete, and Verifiable example so we can help you. — Gerardo BLANCO
– Gerardo BLANCO, Commented May 3, 2018 at 17:58
But I need to change it only if list[i].Status == "Rejected"@GerardoBLANCO — Silco
– Silco, Commented May 3, 2018 at 17:58
It's complete example, because I describe what I have and what I need to get @GerardoBLANCO — Silco
– Silco, Commented May 3, 2018 at 18:00

P. Danielski · Accepted Answer · 2018-05-03 18:26:59Z

Assuming that this code will need some refactoring if you will need to reuse the return data of the ajax call and in general it is not good looking, I would do as follows:

 '<td'+ (list[i].Status == 'Rejected' ? ' style="color:red;"' : '') +'> ' + list[i].Status + '</td>' +

Edit
If in future you will need to assign different colors based on the content of list[i].Status, I suggest to create a content-to-color lookup table:

let contentToColor = { "Rejected": "red", "Success": "green", "Warning": "yellow" };

and then:

 '<td'+ (contentToColor[list[i].Status] !== 'undefined' ? ' style="color: '+ contentToColor[list[i].Status] +';"' : '') +'> ' + list[i].Status + '</td>' +

The way of checking the existence of the variable may be wrong, I don't remember how it is done in JS, but you get the concept.

Anyway, I would suggest to refactor the code by separating the presentation code and the domain code. You will save yourself by the ugly code I wrote above. I had to read it 10 times for checking if the quotes were good.

Tht's great solution, but what if in future I need to check value and change color related to this value?

Sarpyjr · Accepted Answer · 2018-05-03 18:00:33Z

You can use a switch to get the status and set the color base on what you get and pass it to a variable.

Example

<script> function AllProposals() { let getProposalsUrl = '/proposals/index'; $.ajax({ url: getProposalsUrl, contentType: 'application/json; charset=utf-8', type: 'GET', dataType: 'json', processData: false, success: function (data) { $("#proposals").empty(); var list = data; for (var i = 0; i <= list.length - 1; i++) { var mycolor = ""; switch (list[i].Status) { case "Approved": mycolor = "style="color:green"; break; case "Rejected": mycolor = "style="color:red"; //Add more if needed } var tableData = '<tr>' + '<td class="proposalId">' + list[i].Id + '</td>' + '<td > ' + list[i].Project + '</td>' + '<td > ' + moment(list[i].DateFrom).format('DD/MM/YYYY') + "--" + moment(list[i].DateTo).format('DD/MM/YYYY') + '</td>' + '<td> ' + list[i].WorkTime + "--" +list[i].WorkTimeTo + '</td>' + '<td > ' + list[i].Quantity+ '</td>' + '<td> ' + list[i].Service + '</td>' + '<td> ' + list[i].Price + '</td>' + '<td' + mycolor +'> ' + list[i].Status + '</td>' + '</tr>'; $('#proposals').append(tableData); } } }) } </script>

nologo · Accepted Answer · 2018-05-04 00:32:26Z

You can use alter the style attribute using jQuery's .attr method (http://api.jquery.com/attr/)

if(status=="rejected"){ $(.elementclass).attr("style","color:red"); }

Collectives™ on Stack Overflow

Change color related on value

3 Answers 3

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Related