Riapplicare la striping della tabella dopo aver nascosto le righe (Twitter Bootstrap)

Question

Utilizzo Bootstrap e una tabella a strisce che può essere filtrata selezionando alcune opzioni in un modulo. Javascript interpreta gli input del modulo e nasconde le righe dalla tabella che non corrispondono ai criteri selezionati.

Tuttavia, questo rompe lo striping del tavolo sulla tabella a seconda di quali righe sono nascoste (righe grigie accanto a righe grigie, righe bianche accanto a righe bianche).

Mi piacerebbe riapplicare lo striping in base a quali righe sono visibili dopo aver filtrato i risultati. Come posso fare questo?

L'uso di .remove() sulle righe della tabella non è un'opzione, perché potrebbe essere necessario visualizzarli di nuovo se cambiano i criteri del filtro e sto cercando di evitare l'utilizzo di AJAX per aggiornare la tabella in modo dinamico in base agli input del filtro (Mi piacerebbe attenermi a nascondere elementi DOM).

Qualsiasi aiuto è apprezzato! Posso chiarire la domanda se necessario :)

Answer 1

Sì, questa è sicuramente una delle parti fastidiose di striping della tabella. La parte migliore del coraggio qui è probabilmente solo per riapplicare la striping con jQuery dopo ogni aggiornamento:

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

Answer 2

risposta di Anthony non ha funzionato per me. Innanzitutto, non nasconde la classe della tabella Bootstrap table-striped e, in secondo luogo, non esiste (o almeno non sembra) una classe integrata stripe per le righe della tabella.

Ecco il mio approccio, in cui ho filtrato le righe in una tabella con un ID di "report".

Ecco una versione da usare se si definisce la classe "stripe" per <tr> elementi:

// 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"); 
    } 
}); 

Se siete troppo pigri per definire la "striscia" classe CSS allora ecco una rapida & versione sporca:

// 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"); 
    } 
});