Satırları gizledikten sonra tabloyu yeniden çizme (Twitter Bootstrap)

Question

Bootstrap kullanıyorum ve bir formdaki bazı seçenekleri seçerek filtrelenebilen şeritli bir tablom var. Javascript form girişlerini yorumlar ve seçilen kritere uymayan tablodaki satırları gizler.

Ancak, bu, hangi satırların gizlendiğine bağlı olarak tablodaki çizgiyi kırıyor (gri satırların yanındaki gri satırlar, sonraki beyaz satırlarda beyaz satırlar).

Sonuçları filtreledikten sonra hangi satırların göründüğüne bağlı olarak şeritlemeyi yeniden uygulamak istiyorum. Bunu nasıl yapabilirim?

Tablo satırlarında .remove() kullanmak bir seçenek değildir, çünkü filtre ölçütleri değişirse bunları yeniden göstermem gerekebilir ve tabloyu dinamik olarak filtre girişlerine göre güncellemek için AJAX kullanmaktan kaçınmaya çalışıyorum (DOM öğelerini saklamaktan sakınmak isterim).

Herhangi bir yardım için teşekkür ederiz! Gerekirse sorunu açıklığa kavuşturabilirim :)

Answer 1

Evet, bu kesinlikle tablo şeritlemesinin rahatsız edici kısımlarından biridir. Cesaretin daha iyi parçası burada sadece her güncellemeden sonra jQuery ile şeritleme yeniden uygulamak için muhtemelen:

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

Answer 2

Anthony cevabı benim için çalışmadı. İlk olarak, Bootstrap tablo sınıfı table-striped'u gizlemez ve ikincisi, tablo satırları için yerleşik bir sınıf stripe yoktur (veya en azından görünmüyor).

Burada, "raporlar" kimliğine sahip bir tabloda satırları filtrelediğim yaklaşımım var.

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

sonra burada hızlı bir & kirli versiyonu CSS sınıf "şerit" tanımlamak için tembel iseniz: Burada

Eğer <tr> öğelerin sınıf "şerit" tanımlarsanız kullanmak için bir sürümü: çok sayıda çözüm sunan bu konu hakkında

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