You need to use a callback function in your fade function so that the rows are actually invsisible / visible when you run your code to reapply the striping. Otherwise the animation of the fade function is not done, the row is still visible and your striping is messed up
$(document).ready(function () {
$('#customSwitch1').change(function () {
if (!this.checked) {
$('#indexTable tr td:contains(No)').parent().fadeIn('slow', reapplyStripes);
}else {
$('#indexTable tr td:contains(No)').parent().fadeOut('slow', reapplyStripes);
}
});
$('#customSwitch1').change();
});
function reapplyStripes() {
$("#indexTable tr:visible").each(function (index) {
$(this).css("background-color", !!(index & 1)? "rgba(0,0,0,0)" : "rgba(0,0,0,0.05)");
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<input type="checkbox" id="customSwitch1" />
<table class="table table-striped" id="indexTable">
<tr>
<td>YES</td>
</tr>
<tr>
<td>No</td>
</tr>
<tr>
<td>Yes</td>
</tr>
<tr>
<td>Yes</td>
</tr>
</table>
Hi, it looks like I have another small issue now. I also have a sorting script on my table columns and when I sort the table on different columns, the stripping gets messed up. I think this is because initially bootstrap stripes the rows by position. Any tips would be great.
Cant you just add the reapplyStripes function as a callback to your sorting Funktion ?
I was hoping to keep the table format as it is initially because sorting it normally does not mess up the striping. Im begging to realize this might require removing the rows instead of hiding them and then appending them back