JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div>
<input type="button" id="test" className="invalid" value="Hide">
<table id="testtable" class="tablesorter custom-popup">
        <thead>
        <tr>
            <th class="filter-false">S.no</th>
            <th class="filter-false">name</th>
            <th class="filter-select" data-placeholder="Select All">Department</th>
            <th class="filter-false">Age</th>
            <th class="filter-false">Section</th>
        </tr>
        </thead>
        <tbody>
<tr class="invalid">
    <td>1</td>
    <td>yyy</td>
    <td class="CSE">CSE</td>
    <td>17</td>
    <td>A</td>
<tr>
<tr>
    <td>1</td>
    <td>zzz</td>
    <td class="ECE">ECE</td>
    <td>17</td>
    <td>A</td>
<tr>
<tr class="invalid">
..
    </tr>     
...
</div>

JavaScript

$(document).ready(function () {
    $('#test').on('click', function () {
        var name = $(this).attr('className');

        if ($(this).val() == 'Hide' ) {
            $('#testtable tr.' + name).hide();
            $(this).val('Show');
        } else{
            $('#testtable tr.' + name).show();
            $(this).val('Hide');
        }

    });

});