View Full Version : Help: How to use js to assign style values to table cells?

02-02-2011, 07:58 PM
I'm Stephen Martin, an undergraduate Psychology student and researcher. Although I am a self-proclaimed tech geek, the extent of my knowledge ends abruptly at any sort of coding. I need help from anyone who is willing.

The paradigm:
I am currently investigating the decision making strategies in a particular population (I cannot reveal too much, lest our study be scooped by competing researchers in the field). The paradigm that we use is built through a package called MouseLabWeb (http://www.mouselabweb.org/). MLWeb basically provides an interface for researchers to create a html/php/js/css website that presents a grid (table). A small example is shown on the aforementioned website. The javascript functions allow each participant's events to be recorded, timestamped, and written to a MySQL database. This allows the researcher to know which cells the participant viewed, in what order, for how long, and ultimately to which decision the participant came.

Additionally, the PHP/HTML creates the table, but the data within it is populated by the javascript. This is a blessing and a curse. Here is why.

The problem:
The javascript offered by MLWeb allows the cells to be randomized. This is necessary, because in such paradigms, counter-balancing is required, otherwise there would be order effects (e.g., people tend to automatically read from the upper left) that are not controlled for.
So the order of the columns and rows are randomized, the data which is then placed into the html/php table.

For the current study, we want the cells corresponding to particular types of information to be shaded differently. For example, we'd want cells that contain bad information to be dark, cells that contain neutral info to be grey, and cells that contain good information to be white.
The problem is that setting these values (style="background-color: #XXXXX) only applies to the table as created by the PHP. It only affects the position, and does not consider the information that it is filled with.

We want the information that a cell is filled with to dictate what background-color the cell is.
Example of the problem (A,B,C are the different types of info, with the surrounding character implying shading)
What we want:
Unrandomized: [.A.] [|B|] [#C#]
Randomized: [#C#] [.A.] [|B|]
What the problem is:
Randomized: [.C.] [|A|] [#B#]

Again, thank you for reading this long post. I'm up for any suggestions!

The website uses PHP to render a table and javascript to populate it. Javascript randomizes the column and row order upon each visitation, thus randomizing the cells.
How do I make javascript issue a background-color change to each cell according to the information that it is populated with.

02-02-2011, 08:01 PM
The PHP:
The js: