jquery tablesorter Plugin - behalten alternative Zeilenfarben

Question

Ich habe eine HTML-Tabelle, die ich auf alternative Zeilenfarben beantrage, und ich fügte darauf jquery Tisch Sortierer, so dass Benutzer die Tabelle sortieren können.

Das Problem ist, dass die alternativen Zeilenfarben alle jetzt als (basierend auf der Sortierung) sind vermasseln es mehr Zeilen mit der gleichen Hintergrundfarbe sind.

Gibt es eine Möglichkeit, die alternative Zeilenfarbe mit jquery Tabelle Sorter zurücksetzen?

Answer 1

Es gibt bereits eine Standard-Widget zebra, in den Kern eingebaut, die die Klassen odd und even zu abwechselnden Reihen gelten. Es funktioniert, ob Sie class=even/odd in die HTML-Datei hinzugefügt haben.

Es ist wirklich einfach einzurichten. Ich folgte einfach den Anweisungen auf dem Tabelle Sorter Website rel="nofollow und modifiziert dann das Dokument-Ready-Funktion auf die folgenden:

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

Ich habe ein Beispiel, während die Frage zu beantworten. Sie können sehen, oder? siehe den Beispielcode .

Answer 2

Auf der Grundlage von Anthony Antwort, aber umformuliert als Einzeiler (meistens):

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

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

JQuery Anrufe können wie oben „angekettet“, Operationen wie filter() mit den ausgewählten Elementen zu begrenzen und .end() auf „reset“ auf die letzte Auswahl. Anders ausgedrückt, jeder .end() „rückgängig gemacht“ die vorherige .filter(). Die endgültige .end() wird weggelassen, da gibt es nichts nach, das zu tun.

Answer 3

Um die Zebrastreifen nach einer Art beibehalten hat stattgefunden Sie müssen wieder das Zebra-Widget auszulösen.

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

Dies ist weniger ein Hack, wie Sie die Logik der Zebra-Widget Wiederverwendung werden, anstatt sie zu replizieren.

Hinweis: Diese Art von Arbeit-around nur in Fällen, in denen die Standard-Zebra-Widget versagen erforderlich ist. Ich habe in den meisten Fällen festgestellt, dass dieser Hack nicht als das Widget erforderlich ist ordnungsgemäß funktioniert Art veröffentlichen.

Answer 4

Wie wäre:

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

Ach ja, und wenn Sie eine wirklich einfache Lösung wollen, könnten Sie Ihren Atem für diese CSS Pseudo-Klasse von allen großen Browsern halten, um abgeholt werden:

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

Aber meine Vermutung basiert darauf, wie FF und Unternehmen Griff CSS für dynamische HTML, es Ihre Streifen onload setzen würde, aber die CSS nach Art keine Anwendung. Aber ich möchte sicher wissen.

Answer 5

überarbeitete und Neueste Arbeitslösung - eingebaute * Dies wird auch die Änderung der Farbe auf Klick aktivieren. *

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

Jetzt sollte alles selbst zu!

Answer 6

Via CSS:

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