Table row styles are usually straight forward, and generally you’d use CSS. Something similar to this:

tr:nth-child(even) {
    background-color: red;
}

But what happens when a user filters the table rows? Once you ‘display:none’ the table rows that don’t qualify for the filter, they disappear, but the visible table rows don’t change their background color accordingly.

This problem is more common than you’d think.

To make sure the table row background colors switch during filtering, call this function on your click event (and also make sure your table ID matches the specified ID in the function):

function addRowStripes(){
var table = document.getElementById("table");
var k = 0;
for (var j = 0, row; row = table.rows[j]; j++) {
  if (!(row.style.display === "none")) {
    if (k % 2) {
      row.style.backgroundColor = "white";
    } else {
      row.style.backgroundColor = "#e4e4e4";
    }
    k++;
  }
 }
}

**You will most likely have to set a default background color for the unfiltered table rows before a click event occurs to cover all your bases. If this is the case, just use the CSS code located at the top of this post!