Question

当鼠标悬停时，我需要一个片段来突出显示表格行。如果它有jquery tablesorter插件，我无法添加此功能。

Answer 1

在不影响tablesorter的zebra widget的情况下，您可以在 tablesorter / style.css中添加一些额外的css

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

Answer 2

要突出显示表格中的行，您可以使用：

$(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/

Answer 3

你可以尝试使用jQuery.Colorize插件和tablesorter。它可以让你保留其他颜色。 http://jquerycolorize.blogspot.com/2012/01/how-to-use-tablesorter-plugin-with.html

不过，如果你使用asp.net mvc，更好的选择就是使用MvcContrib Grid。

Answer 4

我想进一步分析行元数据＆amp;显示叠加层。我发现了这个问题，但解决方案并没有真正适用于tablesorter。我从2009年的博客文章中找到了一个可行的解决方案：

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

通过创建tablesorter小部件重新添加悬停。

<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>

Jquery tablesorter行悬停

4 个答案: