In any web-application, there are always a few trivial and seemingly mundane enhancements the developer can implement that add significant value for the end-user. And with the right tools in hand, implementing these enhancements can be down right simple. Take alternating gray rows in a table for instance, or a slick mouseover highlighting effect when the user moves their mouse cursor over each row in a table. Not surprisingly, you can easily implement these quick enhancements using jQuery.A complete example can be found here, or continue reading for some screen shots.
Here's a very quick walk through ...
1 - Before
Here's what a boring table might look like before this enhancement:
2 - After
Here's what the table would look like after the fix:
Clearly this table is much more usable. The background color of each row alternates and a yellow highlight follows the mouse cursor as the user navigates across the table.
3 - Example
A complete example, including the JavaScript and CSS can be found here. In a nutshell, the supporting jQuery JavaScript is:
The supporting CSS and HTML examples can be found on the example page as well.
Enjoy.
1 - Before
Here's what a boring table might look like before this enhancement:
2 - After
Here's what the table would look like after the fix:
Clearly this table is much more usable. The background color of each row alternates and a yellow highlight follows the mouse cursor as the user navigates across the table.
3 - Example
A complete example, including the JavaScript and CSS can be found here. In a nutshell, the supporting jQuery JavaScript is:
$("#mytbody > tr:even").addClass("even");
$("#mytbody > tr:odd").addClass("odd");
$("#myheaderrow ~ tr").bind( "mouseover", function(e){
$(this).toggleClass("highlight");
});
$("#myheaderrow ~ tr").bind( "mouseout", function(e){
$(this).toggleClass("highlight");
});The supporting CSS and HTML examples can be found on the example page as well.
Enjoy.
Did you find this post helpful, or at least, interesting?