jqueryを使用してソートする際に、テーブルをソートして背景色を交互に変更するにはどうすればよいですか？

Question

列のソートを開始すると、表の行の背景色に問題があります。私の文書がロードするコードは次のように実行されます：私の目をソートする

$('tbody tr:even').css('background-color','#F1F1F1'); 
$('tbody tr:odd').css('background-color','#FFFFF0'); 

コードは以下です：

$('.toggle').toggle(function(){ 
    $(this).css("background-image", "url('desc.gif')"); 
}, function(){ 
    $(this).css("background-image", "url('asc.gif')"); 
});

が、それらはソート開始すると偶数行は右互いの上に存在し、互いの上に奇数の行があります。並べ替えるときに行の色を変更するにはどうすればよいですか？私はすでに次のことを試してみましたが、それは動作しません：

$('.toggle').toggle(function(){ 
    $(this).css("background-image", "url('desc.gif')"); 
    $('tbody tr:even').css('background-color','#F1F1F1'); 
    $('tbody tr:odd').css('background-color','#FFFFF0'); 
}, function(){ 
    $(this).css("background-image", "url('asc.gif')"); 
    $('tbody tr:even').css('background-color','#F1F1F1'); 
    $('tbody tr:odd').css('background-color','#FFFFF0');     
}); 

Answer 1

あなただけjQuery Tablesorterを使用する場合は、アウトオブボックスのソートやゼブラストライプ得ることができます。私はいつもそれを使用して、それは素晴らしい作品です。

それが適切交互行色があろう維持ソーティングで設定テーブルの例：

$("#mytable").tablesorter({ 
    widgets: ['zebra'] 
}); 

Answer 2

誰が等テーブルのソート、ページング、を扱っているときはいつでも、私はすぐDataTablesそれらを参照します。これは、あなたが探している "ゼブラストライプ"レイアウトを維持しながら、このような並べ替えを適切に行います。私はそれが私の会社のアプリで現在働いており、それは素晴らしいです。

私はこのアプローチを常に提案する理由は、あなたが得る余分な機能のためです。ソート、ページング、フィルタリング、および結果制限は、すべてdomまたはJSONまたはAJAXデータソース経由でロードされたテーブルを介して行われます。さらに、ThemeBuilderを追加すると、クイックスタイリングと優れたCSSがサポートされ、無視できないツールになります。