Example 7: Adding checkboxes to each row

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 checkbox.

Only the tables with the class of "pickme" (on this page, that means 'table 2') will have the stripes/highlights/lockrows functions applied.

Update (May 14, 2007): Note that this doesn't work if you click on the checkbox itself. See example 8 for the checkbox example that works.

Table 1:

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

Table 2

  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

Table 3:

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.