jquery tablesorterプラグイン-代替の行の色を保持

Question

代替の行の色を適用しているhtmlテーブルを取得し、ユーザーがテーブルをソートできるようにjqueryテーブルソーターを追加しました。

問題は、（ソートに基づいて）同じ背景色の複数の行があるため、代替行の色がすべて台無しになっていることです。

jqueryテーブルソーターで代替行の色をリセットする方法はありますか？

Answer 1

コアに組み込まれたデフォルトのウィジェット zebra が既にあり、クラス odd および even を交互の行に適用します。 class = even / odd をhtmlファイルに追加したかどうかにかかわらず機能します。

設定は本当に簡単です。 table sorter Webサイトの指示に従って、ドキュメントの準備機能を次のように変更しました。

<script type="text/javascript">
$(document).ready(function() 
    { 
        $("#myTable").tablesorter({ 
    widgets: ['zebra'] 
    }); 
    } 
); 
</script>

質問に答えながら例を作成しました。 実行中の結果を表示、またはサンプルコードを参照。

Answer 2

アンソニーの答えに基づきますが、ワンライナーと言い換えられます（大部分）：

function fixStripes() {
    $('table tr').removeClass('odd even')
        .filter(':even').addClass('even').end()
        .filter(':odd').addClass('odd');
}

$("table").bind("sort", fixStripes);

JQuery呼び出しは「連鎖」できます。上記のように、 filter（）などの操作を使用して選択した要素を制限し、 .end（）を＆quot; reset＆quot;に制限します。最後の選択まで。別の言い方をすると、各 .end（）＆quot; undoes＆quot;前の .filter（）最後の .end（）は、その後何もする必要がないため、省略されています。

Answer 3

並べ替えが行われた後にゼブラストライプを維持するには、再びゼブラウィジェットをトリガーする必要があります。

$('#myTable')
.tablesorter({ widgets: ['zebra'] })
.bind('sortEnd', function(){
    $("#myTable").trigger("applyWidgets"); 
});

ゼブラウィジェットのロジックを複製するのではなく、再利用するため、これはハックではありません。

注：この種の回避策は、デフォルトのゼブラウィジェットが失敗する場合にのみ必要です。ほとんどの場合、ウィジェットはソート後に正しく動作するため、このハックは必要ないことがわかりました。

Answer 4

方法：

function fixStripes() {
     var i = 0;
     var rowclass;
     $("table tr").each(function() {
          $(this).removeClass("odd even");
          rowclass = (i%2 == 1) ? "odd" : "even";
          $(this).addClass(rowClass);
      });
}

$("table").bind("sort", fixStripes);

ああ、本当に簡単な修正が必要な場合は、このCSS擬似クラスがすべての主要なブラウザに取り上げられるまで息を止めてください：

table tr:nth-child(n+1) {
    color: #ccc;
}

しかし、FFと会社が動的HTMLのCSSを処理する方法に基づいているのではないかと推測します。ストライプのオンロードを設定しますが、並べ替え後にCSSを適用しません。しかし、私は確実に知りたいです。

Answer 5

改訂された最新の作業ソリューション-組み込み * これにより、クリック時の色の変更も有効になります。 *

 <script type="text/javascript">
   $(document).ready(function () {

    $('#tblLookupResult').tablesorter({ widthFixed: true, sortList: [[0, 0], [0, 1], [0, 2]], theme: 'blue', widgets: ['zebra'] })
                          .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });

    $('#tbltable1 tbody tr').live('click', function () {               
                    if ($(this).hasClass('even')) {
                        $(this).removeClass('even');
                        $(this).addClass('ui-selected');
                    }

                    else if ($(this).hasClass('odd')) {
                        $(this).removeClass('odd');
                        $(this).addClass('ui-selected');
                    }
                    else {
                        $(this).removeClass('ui-selected');
                        $(".tablesorter").trigger("update");
                        $(".tablesorter").trigger("applyWidgets");                         
                    }

        });

    });
</script>

これですべてが自動的に開始されます！

Answer 6

CSS経由：

  table.tablesorter tr:nth-child(even) {
        background-color: #ECFAFF;
    }