在隱藏行之後重新應用表格條帶（Twitter Bootstrap）

Question

我使用Bootstrap並具有可通過選擇表單上的某些選項進行過濾的條紋表格。 Javascript解釋表單輸入，並隱藏表中與選定條件不匹配的行。

但是，這根據隱藏哪些行（灰色行旁邊的灰色行，下一行白色行）打破了表格中的表格分條。

我想重新應用基於過濾結果後可見行的條帶。我怎樣才能做到這一點？

對錶格行使用.remove（）不是一個選項，因爲如果過濾條件發生變化，我可能需要再次顯示它們，我試圖避免使用AJAX根據過濾器輸入動態更新表（我想堅持隱藏DOM元素）。

任何幫助表示讚賞！我可以澄清這個問題，如果需要的話:)

Answer 1

是的，這絕對是表條紋中令人討厭的部分之一。這裏勇敢的一個重要部分可能只是每次更新後重新使用jQuery的條紋：

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

Answer 2

安東尼的回答並沒有爲我工作。首先，它不隱藏引導表類table-striped，其次，對於錶行，沒有（或者至少看起來不是）內置類stripe。

這裏是我的方法，我在表格中過濾了一個ID爲「reports」的行。

這裏有一個版本，如果你定義的類「條」爲<tr>元素的使用方法：

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

如果你懶得來定義的CSS類「條紋」，那麼這裏有一個快速&髒版：

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