Reapply table striping after hiding rows (Twitter Bootstrap)

Question

I'm using Bootstrap and have a striped table that can be filtered by selecting some options on a form. Javascript interprets the form inputs, and hides rows from the table that don't match the selected criteria.

However, this breaks the table striping on the table depending on which rows are hidden (gray rows next to gray rows, white rows next white rows).

I'd like to reapply the striping based on what rows are visible after filtering the results. How can I do this?

Using .remove() on the table rows is not an option, because I may need to show them again if the filter criteria changes and I'm trying to avoid using AJAX to update the table dynamically based on the filter inputs (I'd like to stick to hiding DOM elements).

Any help is appreciated! I can clarify the question if needed :)

Answer 1

Seems like Bootstrap 4 have a different implementation. Following @Anthony's answer, this is how it would work:

$("tr:visible").each(function (index) {
    $(this).css("background-color", !!(index & 1)? "rgba(0,0,0,.05)" : "rgba(0,0,0,0)");
});

Tables are now striped by pure CSS and not by adding the "stripe" class name.

Answer 2

Yes, this is definitely one of the annoying parts of table striping. The better part of valor here is probably just to reapply the striping with jQuery after each update:

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