// Make sure you have the document ready function so you can apply the JQuery code on a fully loaded DOM tree.
$(document).ready(function() {
    /* Since the toggleClass doesn't work in all browsers we easily create the same behaviour by add and
    remove a css class on hover, which basiclly is adding onmouseover and onmouseout events on all tr elements.*/
    $('tr').hover(
        function () {
            $(this).addClass('hover');
        },
        function () {
            $(this).removeClass('hover');
        }
    );
    // We don't want the hover effect on our table header, so we unbind the event for our table row containing the th elements
    $("tr.table-header").unbind('mouseenter mouseleave');
});
