CODEWITHSUNDEEP
jqueryjson
microchipmatt
microchipmatt

Reputation: 47

Change color of Table Data cell, based on the Database Data in Cell

I have an HTML page built in jquery Mobile, that pulls Data from a database using AJAX, JSON and php. It then loops through the Database/Table, and populates the table. All is working and going well there. However, I cannot seem to figure out how to change the Table DATA Cell Background color, once the Table Data Cell has been populated. IE: For each record in the Table, there is a "Status" TEXT field that has a text value of, "RUNNING" or "CANCELLED", once the code is done. I want the cells the Says either RUNNING OR CANCELLED, to be GREEN or RED, depending on the Value. RED for CANCELLED, and GREEN for RUNNING. If you can help please let me know. The table is populated by an AJAX, JSON, PHP MYSQL Array, so the output to my table looks like this:

for(var i = 0; i < data.length; i++) {
     $('#output').append("<table width=100%><tr><td width=20%><b>"+data[i][1]+"</b></td><td width=20%><b>"+data[i][8]+"</b></td><td width=20%><b>"+data[i][2]+"</b></td><td class=statusClass width=20%><b>"+data[i][3]+"</b></td><td width=20%><b>"+data[i][4]+"</b></td></tr></table>");      
    }

If you want to see ALL of my code for this page, please let me know.

Upvotes: 3

Views: 1557

Answers (2)

Artyom Neustroev
Artyom Neustroev

Reputation: 8715

You can apply class attribute based on your value ("RUNNING" or "CANCELLED") on the fly.
Since you are using <table> element and jQuery, it may look something like this:

$row = $('<tr />');
$row.append($('<td />', {
    text: item[1],
    class: item[0]
}));
$('#sampleTable').append($row);

FIDDLE EXAMPLE

Upvotes: 0

Hanlet Esca&#241;o
Hanlet Esca&#241;o

Reputation: 17380

Try this:

$("#output td:contains(RUNNING)").attr("style","background-color:green");
$("#output td:contains(CANCELLED)").attr("style","background-color:red");

jsFiddle: http://jsfiddle.net/hescano/LfnQs/

Upvotes: 1

Related Questions