I have a simple table in which there are a collection of TRs inside a TBODY and a collection of TDs in each TR. I have a jQuery click event bound to a single TD in each TR. When I click on this TD I use css to set its background color. When I click on the bound TD in another TR I want to be able to change the previously selected TD's background color and then change the newly clicked TD to a new background color. My click binding appears as follows:

 

.click(

      function(){

            var nRow = $(this).parent().parent().children90.index($(this).parent());

 

            if(nLastRowSelected)

                  (this).parent().parent().get(0).children(nLastRowSelected).children(1).css({'background-color':'red'});

 

            nLastRowSelected = nRow;

            $(this).css({'background-color':'pink'});

      }

);

 

The purpose of the code is to change a selected TD's background color to pink and change the previously selected TD's color to red. The code changes the selected TD to pink and remembers the previously selected TD's row number. nLastRowSelected is a global. The code that is suppose to change the previously selected TD to red fails indicating that: Object doesn't support this property or method.

 

Can anyone help me understand what I may be doing wrong. I know that if I replace .css with .tagName that the proper TD is presented. .length and .text() return the same object not supported.