Back to Row Locking with CSS and JavaScript
Below is a simple table of top grossing movies in different categories.
Click on a row to highlight it with a class of 'selected'. Click it again to revert it to its previous state. More than one row can have the 'selected' class.
| 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.