Bootstrap: How to keep the table-stripes frequent after filtering or hiding some rows
If you work with striped tables (with the table-striped class) in bootstrap 3.x or bootstrap 4.x, and you filter, hide or move table rows, it can be annoying, because the stripes will be irregular.
jquery comes to help here. just use this little snippet to bring the rows in order again:
Bootstrap 4:
$("tr:visible").each(function (index) {
$(this).css("background-color", !!(index & 1)? "rgba(0,0,0,.05)" : "rgba(0,0,0,0)");
});
Bootstrap 3:
$("tr:not(.hidden)").each(function (index) {
$(this).toggleClass("stripe", !!(index & 1));
});
Source: stackoverflow.com
