jQuery: cannot change background-color of a table cell

Question

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") {
        $(currProjectVar).val($(this).attr('id'));
        $(this).css("background-color", "red");
    } else {
        $("table#project_table td#" + $(currProjectVar).val()).css("background-color", "blue");
        $(currProjectVar).val($(this).attr('id'));
        $(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">
    <tr>
        <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>
    </tr>
    <tr>
        <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>
    </tr>
</table>

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.

Answer 1

It looks like the problem line is:

$("table#project_table td#" + $(currProjectVar).val()).css("background-color", "blue");

So I'd find ways to a) break that line apart into multiple, simpler lines, and b) get more info on what each step is doing.

For example, you could start by defining the ID selector in a separate variable, then console.log the selector string so you know that it's being generated correctly:

var target_id = '#' + $(currProjectVar).val();
// This output will be displayed e.g. in the Chrome developer tools console
console.log('The target ID to be bluified is: ' + target_id);
// Your selector can be simplified since a given #ID should be unique for the page.
$(target_id).css("background-color", "blue");

Breaking things down like this is the first step to figuring out specifically where / what the problem is.

Also, note my comment above; I notice you're selecting for an ID within a parent ID. You should never need to do that because each ID should be unique within the page. If that's not the case, that's probably the cause of your problem; you need to change your non-unique IDs to classes instead.

Answer 2

Not entirely sure why it's not working. I've tried your code in jfiddle and it seems to do what you want.

I would however rewrite the code to something more efficient/readable:

// variable to store the last clicked project
var $currentProject;
// hidden input
var $currentProjectInput = $("#MainContent_CurrProject");

$("#project_table td").click(function () {
    // set the background of the currently selected project to blue (if any)
    $currentProject && $currentProject.css("background-color", "blue");

    // update the current selection to the one we just clicked
    $currentProject = $(this);

    // Set the background of the project we just clicked
    $currentProject.css("background-color", "red");

    // Set the currently project's id as the hidden input value
    $currentProjectInput.val($currentProject.prop("id"));
});

See: jsfiddle