I have a bit of “me” time today to write some code and I thought I’d treat myself to something light and fun by building something purely for its flashiness and aesthetic. Something that does’t have any useful purpose other than it looks good.
The Row Mouse Over Effect
In order to actually see a change when you mouse over, you’ll have to style the rows for highlighting like so:
table.highlightTable tr.highlight td
table.highlightTable tr.highlightAlt td
The script assumes you want to use a different color for alternating rows. If not, you can simply style both highlight and highlightAlt the same.
See It In Action
|col 1 ||col 2 ||col 3 ||col 4 |
|Apple ||Orange ||Banana ||Kiwi |
|Pinto ||Porsche ||Peugot ||Acura |
|LAX ||SFO ||ANC ||NYC |
|No ||Body ||Look ||Here |
|Red ||Blue ||Green ||Alpha |
Get the file
Download the file from here (Right click and save as).
If you have any improvements (as I am sure there will be some), please let me know and I will keep my version updated. I named the script “tableEffects.js” because I hope to add more interesting effects.
And remember, though I tend to preach table-less design, there are semantic uses for tables. When using this script, it helps to make sure that your tables are semantically marked up. For example, if you don’t want your header row to highlight, use <th> tags instead of <tr>. The script ignores the table header tags.