Table row highlight on hover using JQuery

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');
});

4 Responses to “Table row highlight on hover using JQuery”

  • Jeff Winkler says:

    An easier way to do this is with toggleClass()… only takes one function.

  • jorgen says:

    Hi Jeff,

    Yeah, you are completely right that it would be easier and more clean to use toggleClass. However, at the time around the writing of the post various versions of Safari and Webkit didn’t support toggleClass for some reason and therefor the double functions. Since most users of Safari and Webkit often update their browsers this might not pose a problem any more.

    // J├Ârgen

  • Wilma says:

    Until I found this I touhhgt I’d have to spend the day inside.

  • 3 Day Diet says:

    3 Day Diet…

    [...]below are a couple of links to online sites which we link to seeing as we believe there’re worth checking out[...]…

Leave a Reply

*