I am wanting to change the the background color of a table cell based on the text value within the cell. I.e. if the value in the cell is "Good" change the background color to green and so on.
I am converting an excel table to html table using the HTMLReportGenerator then created custom html where the script below runs but the output doesn't work. I just get the html table with no background colors.
The jQuery code below seems to work when testing it using this site - jQuery toggleClass example - JSFiddle - Code Playground :
<script>
var cell = $('td');
cell.each(function() { //loop through all td elements ie the cells
var cell_value = $(this).html(); //get the value
if (cell_value == "Bad") //if then for if value is "Bad"
$(this).css({'background-color' : 'red'}); // changes td to red.
else if (cell_value == "Good") //if then for if value is "Good"
$(this).css({'background-color' : 'green'}); // changes td to green.
else if (cell_value == "Ok") //if then for if value is "Ok"
$(this).css({'background-color' : 'yellow'}); // changes td to yellow.
});
</script>
jsfiddle result:
Here's the output HTML table:
HTMLReportGenerator setup:
Any ideas? Let me know if more information is needed.
Any help is greatly appreciated.