- Tabular Headaches
- Add the Final Touches
- Create Lively Tables
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Create Lively Tables
One of the worst things that can happen to a web user is a very wide table that requires clicking on a small icon in the rightmost column based on information displayed in the leftmost column.
The alternate row backgrounds that we’ve already added to our tables somewhat alleviate the problem, but it’s much better if you highlight the table row the user is currently pointing at with the mouse; the highlight will make it very obvious if the correct row is selected.
To add the highlight to our tables, we just need to add a few extra lines in our enrichTable function: whenever we find a table row without a TH element, we attach onmouseover and onmouseout events that set and remove a special ActiveRow class:
row.onmouseover = function() { xAddClass(this,"ActiveRow"); }
row.onmouseout = function() { xRemoveClass(this,"ActiveRow"); }
Obviously, we also need to create an extra CSS rule defining the new class. This one has to use the !important keyword to override the background color already set on even rows with the EvenRow class:
TABLE.printout TR.ActiveRow { background-color: #FFFFC0; }
You can view the final web page as well as the source JavaScript code, CSS definitions, and HTML markup on my web site.