1

http://tablesorter.com/jquery.tablesorter.zipから jQuery プラグイン Tablesorter 2.0 をダウンロードし 、tablesorter/docs ディレクトリにある example-pager.html を変更しました。

追加のロールオーバー効果を書きました:

    $(関数() {
        $("テーブル")
            .tablesorter({widthFixed: true, widgets: ['zebra']})
            .tablesorterPager({コンテナ: $("#pager")});

            /** 追加コード */
            $("tr").mouseover(関数 () {
            $(this).addClass('over');
            });

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

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

            $("tr").dblclick(関数 () {  
            $(this).removeClass('marked');
            });
            /** 追加コード END */


});

そしてもちろん、themes/blue/style.css ファイルを変更しました。

/* 追加コード */
table.tablesorter tbody tr.odd td {
背景色: #D1D1F0;
}

table.tablesorter tbody tr.even td {
背景色: #EFDEDE;
}


table.tablesorter tbody tr.over td {
背景色: #FBCA33;
}

table.tablesorter tbody tr.marked td {
背景色: #FB4133;
}
/* 追加コードEND*/

これはすべて正常に機能しますが、さらにページ、つまりページ 2 3 または 4 に移動すると、効果がなくなります。私は本当にあなたの助けに感謝します

4

3 に答える 3

1

私は問題を解決しました。

ロールオーバーとマークされたエフェクトを配置した後、ページャー関数を呼び出すだけです。コードは次のとおりです。

$(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")});  
    });
于 2010-05-19T04:47:39.180 に答える
1

参考までに、新しい行をクリックしたときに、以前に選択した行の「マークされた」クラスを削除する場合は、次のようにします。

$("tr").click(function () { 
  $("tr.selected").removeClass('marked');
  $(this).addClass('marked');
});
于 2011-02-23T18:26:55.727 に答える
0

また、並べ替え後に行の色がめちゃくちゃになっていたときに、1 つの問題に直面しました。以下を指定して解決しました。

$(#your_table).tablesorter({ widgets: ["zebra"], widgetZebra: {css: ["your_odd_css","your_even_css"]} });

これでうまくいきます。発色問題なし。

于 2010-05-20T11:04:02.783 に答える