当前位置：文江博客话题详情

Jquery tablesorter 行悬停

发布于 2024-11-03 07:23:18 字数 65 浏览 0 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱已欠费 2024-11-10 07:23:18

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

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

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

回复收藏 0 原文

迷离° 2024-11-10 07:23:18

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

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

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/

回复收藏 0 原文

铁轨上的流浪者 2024-11-10 07:23:18

您可以尝试使用 jQuery.Colorize 插件和 tablesorter。它将允许您保留替代颜色。 http://jquerycolorize.blogspot.com/2012 /01/how-to-use-tablesorter-plugin-with.html

顺便说一句，如果您使用 asp.net mvc，更好的选择是使用 MvcContrib Grid。

回复收藏 0 原文

那一片橙海， 2024-11-10 07:23:18

我想进一步分析行元数据&显示叠加层。我发现了这个问题，但解决方案并没有真正与表排序器一起正常工作。我从这篇 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>

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>

回复收藏 0 原文

~没有更多了~