Striping a dynamic table

I have a dynamic table that is pulling in rows based on ccss class. All of the rows are set to display:none until they are called in. I want to have alternate row colors for readability (white and gray alternating). When I pull the rows in they keep their color that they were assigned when the entire table is present. I have seen other topics on this but the code is not working for me.

CSS

.new-table tbody tr:nth-child(2n) {background-color: #f1f1f1;}
.new-table tbody tr {display: none;}

HTML

<table class="new-table">
<tbody>
<tr class="C">
<td></td>
<td></td>
</tr>
<tr class="C">
<td></td>
<td></td>
</tr>
<tr class="D">
<td></td>
<td></td>
</tr>
</tbody>
</table>


<script>
var show = document.querySelectorAll(".C");   
for (let i = 0; i < show.length; i++) {
if (show[i].style.display === "none"){
show[i].style.display = "none";
}else{
show[i].style.display = "table-row";  
}
}    
</script>