I have been trying to get this working on my own, and have now given up. I got majority of the code off SO and other sites I Googled.
What I am trying to do is change the background-color
of my first <td>
based on the value of my last <td>
This is what I have at the moment, but I cant seem to get any other colour working other than the first if statement
:(
$(document).ready(function() {
$("#tableData tr:not(:first)").each(function() {
//get the value of the table cell
var Colour = $(this).find("td:nth-child(4)").html();
alert(Colour);
//check the colour
if (Colour == "red") {
//change the color of the background
$(this).find("td:nth-child(1)").css("background-color", "red");
}
else if (Colour == "green") {
$(this).find("th:nth-child(1)").css("background-color", "green");
}
else if (Colour == "blue") {
$(this).find("th:nth-child(1)").css("background-color", "blue");
}
});
});
I have also created a FIDDLE for you to see what I am experiencing. Please could you let me know how I have this change dynamically based on the cell value?
Thanks! Mike