jQuery table effect – hover and background colors

This is a table to demo the effect by using jQuery to assign the background colors on even and odd rows, and the highlight on mouse over effect. Click read more button to see the scripts and css…

Web Design IdeasTake a look at a variety of ready-made website templates to get some great web design ideas!
Swap ImagesSwap images look fantastic and are also great fun to design, so try and use them if possible.
Rollover ImagesRollovers are another favorite. We try to use rollovers whenever possible - they are extremely simple and add a bit of class to a web site.
DHTMLIf you have sub menus or complex navigation systems, use DHTML. They look neat and are again very simple to use.
FlashThough we don't recommend designing an entire site in Flash it may be a good idea to make an interesting Flash intro or insert small Flash animations in important pages of your site.
Eye Catching GraphicsDesign eye-catching graphics to make your site stand out from the ordinary web sites.
Use Tables CreativelyDesign simple but smart web sites by just using tables in different ways.

This is a table to demo the effect by using jQuery to assign the background colors on even and odd rows, and the highlight on mouse over effect. Click read more button to see the scripts and css.

<script type="text/javascript">
    $(function() {
        $("#tblwellness tr:even").addClass("stripe1");
        $("#tblwellness tr:odd").addClass("stripe2");

        $("#tblwellness tr").hover(
            function() {
                $(this).toggleClass("highlight");
            },
            function() {
                $(this).toggleClass("highlight");
            }
        );	
    });
</script>
<style type="text/css">
.stripe1 {
    background-color:#336699;
}
.stripe2 {
    background-color:#5d256d;
}
.highlight {
    background-color: #ffcf63; color:#000000;
    font-weight:bold;
}
</style>
Tagged with:
 

Comments are closed.



Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...