Menu
on load my table looks like
<table id="mytable">
<tr><td> </td></tr> //odd color
<tr><td> </td></tr> //even color
<tr><td> </td></tr> //odd color
<tr><td> </td></tr> //even color
</table>
on some action it becomes like
<table id="mytable">
<tr><td> </td></tr> //odd color
<tr style="display: none;"><td> </td></tr> //even color
<tr><td> </td></tr> //odd color
<tr><td> </td></tr>
<tr><td> </td></tr>`
</table>
if 2nd row is not visible 3rd row should show even color
307
A style selector in CSS is used to change the alternative rows. Using the CSS style selector, you can easily modify the color of the alternate rows. The nth-child() selector in CSS takes an even or odd parameter and then changes the color using the background-color property within this style selector.
Try this simple one:
$("#mytable tr").removeClass("odd even");
$("#mytable tr:visible:odd").addClass("odd");
$("#mytable tr:visible:even").addClass("even");table,
th,
td {
border: 1px solid black;
}
.odd {
background-color: #99FFFF;
}
.even {
background-color: #FFFF99;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='mytable'>
<tr>
<td> 1111</td>
</tr>
<tr style="display: none;">
<td> 2222</td>
</tr>
<tr>
<td> 3333</td>
</tr>
<tr>
<td> 4444</td>
</tr>
</table>http://jsfiddle.net/fLc1aujb/
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
