JSFiddle - React, Tailwind, and code Playground

HTML

<table class="display" id="events" border="0" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th></th>
            <th>Date</th>
            <th>Location</th>
        </tr>
    </thead>
    
    
    <tbody>
        <tr class="gradeA odd">
            
            <td><input id="instance_selected0" name="instance_selected0" value="2" type="checkbox"></td>
            
            <td>September 14, 2010</td>
            <td>Royal Festival Hall - London, United Kingdom</td>
        </tr><tr class="gradeU even">
        <td><input id="instance_selected1" name="instance_selected1" value="2" type="checkbox"></td>
        
        <td>September 15, 2010</td>
        
        <td>O2 Academy Newcastle - Newcastle Upon Tyne, United Kingdom</td>
        </tr><tr class="gradeA odd">
        <td><input id="instance_selected2" name="instance_selected2" value="2" type="checkbox"></td>
        
        <td>September 16, 2010</td>
        <td>Glasgow Barrowlands - Glasgow, United Kingdom</td>
        </tr><tr class="gradeU even">

JavaScript

$(function() {
    $('input:checkbox').click(function() {
        var check = $(this).attr('checked');
        $(this).closest('tr').siblings().each(function() {
            if (check) {
                $(this).fadeOut();
            }
            else {
                $(this).fadeIn();
            }
        });
    });
});