jQuery 插件 Tablesorter 2.0 行为怪异

Question

我从下载了 jQuery 插件 Tablesorter 2.0 http://tablesorter.com/jquery.tablesorter.zip 并修改 tablesorter/docs 目录中的 example-pager.html

我编写了额外的翻转效果：

    $(function() {
        $("table")
            .tablesorter({widthFixed: true, widgets: ['zebra']})
            .tablesorterPager({container: $("#pager")});

            /** Additional code */
            $("tr").mouseover(function () { 
            $(this).addClass('over');
            });

            $("tr").mouseout(function () {  
            $(this).removeClass('over');
            });

            $("tr").click(function () { 
            $(this).addClass('marked');
            });

            $("tr").dblclick(function () {  
            $(this).removeClass('marked');
            });
            /** Additional code END  */


});

当然还修改了 theme/blue/style.css 文件：

/* Additional code */
table.tablesorter tbody  tr.odd td {
background-color: #D1D1F0;
}

table.tablesorter tbody  tr.even td {
background-color: #EFDEDE;
}


table.tablesorter tbody  tr.over td {
background-color: #FBCA33;
}

table.tablesorter tbody  tr.marked td {
background-color: #FB4133;
}
/* Additional code END*/

所有这些都工作正常，但是当我转到更多页面（即第 2 3 或 4 页）时 效果消失了！我非常感谢你的帮助

Answer 1

仅供参考，如果您希望在单击新行时删除先前选定行的“标记”类，您可以执行以下操作：

$("tr").click(function () { 
  $("tr.selected").removeClass('marked');
  $(this).addClass('marked');
});

Answer 2

我解决了这个问题。

我只是在放置翻转和标记效果后调用寻呼机函数，代码如下：

$(function() {
    $("table").tablesorter({widthFixed: true, widgets: ['zebra']});

            $("tr").mouseover(function () { 
            $(this).addClass('over');
            });

            $("tr").mouseout(function () {  
            $(this).removeClass('over');
            });

            $("tr").click(function () { 
            $(this).addClass('marked');
            });

            $("tr").dblclick(function () {  
            $(this).removeClass('marked');
            });

        $("table").tablesorterPager({container: $("#pager")});  
    });

Answer 3

当对行着色进行排序后，我还遇到了一个问题。我通过指定以下内容解决了这个问题：

$(#your_table).tablesorter({
小部件：[“斑马”]，
widgetZebra: {css: ["your_odd_css","your_even_css"]}
});

现在效果很好。没有着色问题。