Dynamic showing table rows and CSS odd/even matching

Question

I have classic bootstrap html table with .table-striped class - it means zebra-striping (every even row has different color than odd).

On same site is filter witch show or hide rows in this table (it depends on filled inputs)

So from table wtih rows like this:

I get rows like this:

How I can resolve this problem? Is there some CSS way to do it? I can see solution with jquery iteration each row and change background-color but it seems to me as dirty solution.

EDIT:

CSS in bootstrap says:

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

I hiding rows like this:

var tableRows = $('#myTable');
    tableRows.each(function() {
        if(condition) {
            $(this).hide();
            ...

programtreasures programtreasures · Accepted Answer · 2018-03-06T10:35:11

Try by adding below script to manage hidden rows,

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

Add this script on load and when ever you are hide/show the row

Dynamic showing table rows and CSS odd/even matching

1 Answers