Table row highlight on hover using JQuery

jorgen — Thu, 15 Oct 2009 20:38:43 +0000

It is a shame that IE6 doesn’t support hover on html elements other than a-tag. The support can be somewhat flakey in other browsers as well. So for make this work we need to use JavaScript and preferably some kind of JavaScript library which in this case is JQuery.

Here is the script in its full glory, small and simple. It is assumed that this behaviour should be applied on all tables. You can easily modify the script to access just a single table with a specific ID or CLASS. A neater version would be to wrap the code into its own function that only is called when a certain ID or CLASS exists inside the DOM tree.

View Table row highlight example

$(document).ready(function() {
    $('tr').hover(
        function () {
            $(this).addClass('hover');
        },
        function () {
            $(this).removeClass('hover');
        }
    );
    $("tr.table-header").unbind('mouseenter mouseleave');
});

Code That Matters » front end

Table row highlight on hover using JQuery