Example 9: Working radios

Back to Row Locking with CSS and JavaScript

Hover over a row to highlight it. Click on a row for additional highlighting and to check/uncheck it's corresponding radio button

The table must have a class of "pickme" to have the stripes/highlights/lockrows functions applied.

I had to add a new function (lockRowUsingRadio) that handles if the radio is clicked (as opposed to the row that the radio sits on). I also had to add a "removeClassName" function courtesy of Robert Nyman (www.robertnyman.com).

Table

  Category Movie Gross
Domestic Titanic $600,788,188
Adjusted for Inflation Gone with the Wind $1,329,453,600
Worldwide Titanic $1,845,034,000
R-Rating The Passion of the Christ $370,274,604
PG-13 Rating Titanic $600,788,188
PG-Rating Star Wars $460,998,007
G-Rating Finding Nemo $339,714,978
NC-17 Rating Showgirls $20,350,754
Movies that never hit #1 My Big Fat Greek Wedding 241,438,208
IMAX Everest $87,178,599

For sake of demonstration, and to make it easy for you to view source for everything, both CSS and JavaScript are in the head of this document. In real-world implementation, it is best practice to use external files for each when possible.