My table has a unique appearance (shown below) thanks to the application of CSS nth-child(2n).
tr:nth-child(2n) {background-color: #f0f3f5;}
https://i.sstatic.net/1AnDi.png
I made some elements hidden on the vID, ID, and MO_Sub tr.
<tr style="display:none">
The table's new look is displayed below, with background color changes for "MO" and "MODEL".
https://i.sstatic.net/aotEM.png
I tried something like the code below but it didn't have the desired effect.
tr:not(.isotope-hidden):nth-child(2n)
If anyone has ideas on how to apply CSS after hiding certain tr elements, I would appreciate any help!
EDIT: additional snippet provided
tr:not([style*="display:none"]):nth-child(2n){
background-color: #f0f3f5;
}
tr:hover{
background-color: cadetblue;
} <table id="form_tb">
<tr style="display:none">
<td><label>vvID :</label></td>
<td><input type="text" name="vvID" placeholder="vvID" readonly></td>
</tr>
<tr style="display:none">
<td><label>vID :</label></td>
<td><input type="text" name="vID" placeholder="vID" readonly></td>
</tr>
<tr style="display:none">
<td><label>vID_sub :</label></td>
<td><input type="text" name="vID_sub" placeholder="vID_sub" readonly></td>
</tr>
<tr style="display:none">
<td><label>ST :</label></td>
<td><input type="text" name="Station" placeholder="Station" readonly></td>
</tr>
<tr style="display:none">
<td><label>SortID :</label></td>
<td><input type="text" name="SortID" placeholder="SortID" readonly></td>
</tr>
<tr>
<td><label>MO :</label></td>
<td data-key='MO'><input id=MO type="text" name="MO" placeholder="MO" readonly></td>
</tr>
<tr style="display:none">
<td><label>MO_Sub :</label></td>
<td><input type="text" name="MO_Sub" placeholder="MO_Sub" readonly></td>
</tr>
<tr>
<td><label>PART :</label></td>
<td data-key='text'><input type="text" name="Part_number" placeholder="PART" readonly></td>
</tr>
<tr>
<td><label>MODEL :</label></td>
<td><input type="text" name="Model" placeholder="MODEL" readonly></td>
</tr>
<tr style="display:none">
<td><label>Class :</label></td>
<td><input type="text" name="Product_Class" placeholder="Class" readonly></td>
</tr>
<tr>
<td><label>Side :</label></td>
<td><input type="text" name="Side" placeholder="Side" readonly></td>
</tr>
</table>This should be the final result based on the snippet shared.