I spent way too much time solving this simple problem than I should. Therefore, I would like SO to look at this, because I do not get why it does not work. I am used to change CSS properties with jQuery, but in this particular case it doesn't work.

So this is my function that is supposed to change the background colour of table cells:

$("table#project_table td").click(function () {     //function_td
    var currProjectVar = "#MainContent_CurrProject";
    if ($(currProjectVar).val() == "None") {
        $(this).css("background-color", "red");
    } else {
        $("table#project_table td#" + $(currProjectVar).val()).css("background-color", "blue");
        $(this).css("background-color", "red");

It does change background-color to red, but not to blue. When that line that changes colour to blue is executed, nothing happens. The cell is still red.

This is the code that defines the table:

<table id="project_table">
        <td id="0">Project0</td><td id="1">Project1</td><td id="2">Project2</td><td id="3">Project3</td><td id="4">Project4</td><td id="5">Project5</td><td id="6">Project6</td>
        <td id="7">Project7</td><td id="8">Project8</td><td id="9">Project9</td><td id="10">Project10</td><td id="11">Project11</td><td id="12">Project12</td>

This is the hidden field that I use to store the current chosen project:

<input type="hidden" name="ctl00$MainContent$CurrProject" id="MainContent_CurrProject" value="None">

There are no problems with marking new cells red or changing the value of the current project. I cannot make earlier cells blue though. What am I doing wrong?

Btw: do not know, whether this is important to mention, but this script runs in an ASP.NET website.

Related posts

Recent Viewed