Example 4: Attempt at Using Both lockRow and highlightRows Not Working So Well.

Back to Row Locking with CSS and JavaScript

Click on a row to highlight it.

The table below has 'stripedTable' function, 'highlightRows' function, and the 'lockRow' function. As you can see when you click on a row, it doesn't work all that well. The 'selected' state doesn't stick.

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.