Erneutes Anwenden der Tabellenstriping nach dem Ausblenden von Zeilen (Twitter Bootstrap)

Question

Ich benutze Bootstrap und habe eine gestreifte Tabelle, die durch Auswahl einiger Optionen in einem Formular gefiltert werden kann. Javascript interpretiert die Formulareingaben und blendet Zeilen aus der Tabelle aus, die nicht mit den ausgewählten Kriterien übereinstimmen.

Dies bricht jedoch die Tabellenstriping auf dem Tisch je nachdem, welche Zeilen ausgeblendet sind (graue Zeilen neben grauen Zeilen, weiße Zeilen nächste weiße Zeilen).

Ich möchte das Striping basierend darauf, welche Zeilen nach dem Filtern der Ergebnisse sichtbar sind, erneut anwenden. Wie kann ich das machen? Die Verwendung von .remove() in den Tabellenzeilen ist keine Option, da ich sie möglicherweise erneut anzeigen muss, wenn sich die Filterkriterien ändern, und ich versuche, die Verwendung von AJAX zur dynamischen Aktualisierung der Tabelle basierend auf den Filtereingaben zu vermeiden (Ich würde gerne DOM-Elemente ausblenden).

Jede Hilfe wird geschätzt! Ich kann die Frage bei Bedarf klären :)

Answer 1

Ja, das ist definitiv einer der lästigen Teile der Tabelle Striping. Der bessere Teil der Tapferkeit ist hier wahrscheinlich nur nach jedem Update das Striping mit jQuery erneut anwenden:

$("tr:not(.hidden)").each(function (index) { 
    $(this).toggleClass("stripe", !!(index & 1)); 
}); 

Answer 2

Anthony Antwort nicht für mich arbeiten. Erstens versteckt es die Bootstrap-Tabellenklasse table-striped nicht, und zweitens gibt es (oder scheint zumindest nicht) eine eingebaute Klasse stripe für Tabellenzeilen.

Hier ist mein Ansatz, wo ich Zeilen in einer Tabelle mit einer ID von "Berichte" gefiltert hat.

Hier ist eine Version zu verwenden, wenn Sie die Klasse „Streifen“ für <tr> Elemente definieren:

// un-stripe table, since bootstrap striping doesn't work for filtered rows 
$("table#reports").removeClass("table-striped"); 

// now add stripes to alternating rows 
$rows.each(function (index) { 
    // but first remove class that may have been added by previous changes 
    $(this).removeClass("stripe"); 
    if (index % 2 == 0) { 
    $(this).addClass("stripe"); 
    } 
}); 

Wenn Sie zu faul sind hier ist die CSS-Klasse „Streifen“ zu definieren, dann eine schnelle & schmutzig Version:

// un-stripe table, since bootstrap striping doesn't work for filtered rows 
$("table#reports").removeClass("table-striped"); 

// now add stripes to alternating rows 
$rows.each(function (index) { 
    // but first remove color that may have been added by previous changes: 
    $(this).css("background-color", "inherit"); 
    if (index % 2 == 0) { 
    $(this).css("background-color", "#f9f9f9"); 
    } 
});