JSFiddle - React, Tailwind, and code Playground

HTML

<table class="stripes">
<tr class="oddRow">
     <td>Avinash</td>
     <td>18-Jun-2010</td>
     <td>LI1004</td>
     <td>5,600.00</td>
     <td>Sort</td>
</tr><tr class="oddRow" style="display:none;" id="toggleRow">
     <td>Ajith</td>
     <td>18-Jun-2010</td>
     <td>LI1006</td>
     <td>5,001.00</td>
     <td>!</td>
</tr><tr class="evenRow">
     <td>Ankur</td>
     <td>14-Jun-2010</td>
     <td>LI1005</td>
     <td>5,000.00</td>
     <td>me</td>
</tr><tr class="oddRow">
     <td>Ajith</td>
     <td>18-Jun-2010</td>
     <td>LI1006</td>
     <td>5,001.00</td>
     <td>!</td>
</tr>
</table>

<p><button data-toggle="#toggleRow">Toggle Row</button></p>

CSS

table.stripes{width:100%;}
table.stripes td{padding:9px;}
table.stripes tr{background:#fff;}
table.stripes tr.evenRow{background:#ccc;}

JavaScript

var zebraStripes = function($) {
    $('table.stripes tr').removeClass('evenRow')
        .filter(':visible:odd').addClass('evenRow');
}

jQuery(zebraStripes);

jQuery(function($) {
    $('button[data-toggle]').click(function(e) {
        e.preventDefault();
        $($(this).data('toggle')).toggle();
        zebraStripes($);
    });
});