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

Question

私は別の行の色を適用しているhtmlテーブルを取って、ユーザーがテーブルを並べ替えることができるようにjqueryテーブルソートを追加しました。

問題は、代替の行の色が（ソートに基づいて）同じ背景色を持つ複数の行が存在するため、すべて混乱していることです。

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

Answer 1

デフォルトのウィジェットzebraがコアに組み込まれています。このウィジェットは、oddとevenのクラスを交互の行に適用します。これは、class=even/oddをhtmlファイルに追加したかどうかにかかわらず動作します。

セットアップは本当に簡単です。私は単純table sorter website上の指示に従ったし、次にドキュメントレディ機能を変更：

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

の質問に答えながら、私は例を作りました。 view the result in action、またはsee the example codeとすることができます。

Answer 2

方法について：

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

私の推測は、動的HTMLのためにFFと会社がCSSをどのように処理するかに基づいています。ストライプのオンロードを設定しますが、ソート後にはCSSを適用しません。しかし、私は確かに知りたいです。

Answer 3

アンソニーの回答に基づいていますが、ワンライナー（主に）と言い換える：

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

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

jQueryのは、選択した要素を制限するfilter()のような操作を使用して、上記のように「チェーン」することができ呼び出し、.end()へ最後の選択に「リセット」します。別の言い方をすれば、それぞれ.end()は前の.filter()を "元に戻す"。最後の.end()は、それ以降は何もないので、中止されます。

Answer 4

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

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

あなたはゼブラウィジェットのロジックを再利用するのではなく、それを複製されるように、これは、ハックの小さいです。

注：この種の回避策は、デフォルトのzebraウィジェットが失敗している場合にのみ必要です。ほとんどの状況で、ウィジェットが正しくポストソートを操作しているので、このハッキングは必要ではないことがわかりました。

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> 

ここではすべてがそれ自身を蹴飛ばすはずです！あなたのCSSで

Answer 6

：

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