JSFiddle - React, Tailwind, and code Playground

by majidf

HTML

<table id="table" style="width: 200px; text-align: center;">
    <tr style="border: 1px gray dashed;" class="1"><td>1</td></tr>
    <tr style="border: 1px gray dashed;" class="2 4"><td>2 4</td></tr>
    <tr style="border: 1px gray dashed;" class="3"><td>3</td></tr>
    <tr style="border: 1px gray dashed;" class="4 5"><td>4 5</td></tr>
    <tr style="border: 1px gray dashed;" class="5"><td>5</td></tr>
    <tr style="border: 1px gray dashed;" class="3"><td>3</td></tr>
    <tr style="border: 1px gray dashed;" class="4"><td>4</td></tr>
    <tr style="border: 1px gray dashed;" class="5 1"><td>5 1</td></tr>
</table>
<button onClick="show('1')">1</button>
<button onClick="show('2')">2</button>
<button onClick="show('3')">3</button>
<button onClick="show('4')">4</button>
<button onClick="show('5')">5</button>
<button onClick="reset()">Reset</button>

JavaScript

var table = document.getElementById( 'table' );

        function show( className )
        {            
            reset();
            for( var i = 0, l = table.rows.length; i < l; i++ )
            {
                var row = table.rows[i];

                if( !row.className.match( className ) )
                {
                    row.style.visibility = 'hidden';
                }
            }
        }

        function reset()
        {
            for( var i = 0, l = table.rows.length; i < l; i++ )
            {
                var row = table.rows[i];
                row.style.visibility = 'visible';
            }
        }