0

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

1
  • @JohnStephen That didn't seem to make any difference.
    – Fizor
    Nov 4, 2014 at 10:11

4 Answers 4

7

Is this what you are trying to do? you don't need an if statement. just pass the Colour value to background-color as such

$(this).find("td:nth-child(1)").css("background-color", Colour);

Fiddle: http://jsfiddle.net/5gcvoqfn/2/

3
  • Thanks Melissa... Quick question on this. What if (red, blue, green) was just an indicator for the colour I wanted, but the actual CSS colour I wanted to use was #FF6666 for example. Would I then need my if statements ?
    – Fizor
    Nov 4, 2014 at 10:20
  • Hey mike - if you don't want to display the hex values on HTML (that is what the #XXXXXX values are called) then yeah, you would need an if statement. I'll think about it further. However if you don't mind displaying the hex value then you can just do this: jsfiddle.net/5gcvoqfn/13 Nov 4, 2014 at 10:28
  • Here is the if else statement version for the custom hex values: jsfiddle.net/5gcvoqfn/14. Note that I simply fixed TWO things from your initial code: (1) I use == on if else statement instead of =, because = is an assignment operator (used to assign values to variables) and == is a comparison operator (used to compare two values - see w3schools.com/js/js_comparisons.asp) (2) I corrected th to td on the green and blue else if statement so that it finds the first td cell. You were trying to find th before which does not exist on the HTML. Hope that helps! Nov 4, 2014 at 10:40
3

=(is the assignment operator) is not the same as ==(is a comparison operator)

$(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().trim();

    //check the colour - Color has the name of the color so just set it
    $(this).find("td:nth-child(1)").css("background-color", Colour);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tableData" style="padding: 5px 5px;">
  <tr>
    <td>Name</td>
    <td>dummy</td>
    <td>dummy</td>
    <td>colour</td>
  </tr>
  <tr>
    <td style="border: solid 1px;">Mike</td>
    <td>12</td>
    <td>3</td>
    <td>red</td>
  </tr>
  <tr>
    <td style="border: solid 1px;">John</td>
    <td>12</td>
    <td>3</td>
    <td>blue</td>
  </tr>
  <tr>
    <td style="border: solid 1px;">Aaron</td>
    <td>12</td>
    <td>3</td>
    <td>green</td>
  </tr>
</table>

1

Updated JsFiddle http://jsfiddle.net/5gcvoqfn/12/

$(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 == "blue") {
            $(this).find("td:nth-child(1)").css("background-color", "blue");
        } else if (Colour == "green") {
            $(this).find("td:nth-child(1)").css("background-color", "green");
        }
    });
});
0

It is as simple as this http://jsfiddle.net/5gcvoqfn/3/

$(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();           
        $(this).find("td:nth-child(1)").css("background-color", Colour);

    });
});

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.