Jquery tablesorter row hover

I need a snippet to highlight a table row when a mouse is hovered. I was not able to add this functionality if i开发者_如何转开发t has jquery tablesorter plugin.

Without affect the zebra widget of tablesorter, you could add some additional css in tablesorter/style.css

table.tablesorter tr.even:hover td,
table.tablesorter tr.odd:hover td {
    background-color: blue;
}

To highlight rows in a table, you could use:

$(document).ready(function() {
    $("table").tablesorter();
    $('table tr').has(':not(th)').hover(
        function(){
            $(this).data('currColor',$(this).css('background-color'));
            $(this).css('background-color','#cdd');
        },
        function(){
            $(this).css('background-color',$(this).data('currColor'));
        }
    );
});

http://jsfiddle.net/userdude/gjm6g/2/

You could try using the jQuery.Colorize plugin along with tablesorter. It will allow you to retain alternative colors. http://jquerycolorize.blogspot.com/2012/01/how-to-use-tablesorter-plugin-with.html

Btw, if you use asp.net mvc a better option would be to use MvcContrib Grid.

I wanted to further analyze the row metadata & display an overlay. I found this question, but the solutions didn't really work properly with tablesorter. I found a working solution from this 2009 blog post:

http://rogtopia.com/entries/jquery-js/tablesorter-hover-with-custom-widget

Re-add hover by creating a tablesorter widget.

<script type="text/javascript">
$(document).ready(function () {
    // tablesorter widget to setup rollovers on table rows
    $.tablesorter.addWidget({
        id: "hover",
        format: function(table) {
            $('tr',$(table)).mouseover(function () {
                $(this).addClass('hover');
            }).mouseout(function () {
                $(this).removeClass('hover');
            });
        }
    });
    // then instantiate your tablesorter calling the hover widget
    $('.tablesorter').tablesorter({widthFixed: true, widgets: ['hover'] });
});
</script>