JSFiddle - React, Tailwind, and code Playground

by Shirin_Abdolahi

HTML

<table width="500" border="1">
<tbody>
  <tr align="center">
    <td><input class="button" type="button" value="Show/Hide" /></td>
    <td><input class="button" type="button" value="Show/Hide"/></td>
    <td><input class="button" type="button" value="Show/Hide"/></td>
    <td><input class="button" type="button" value="Show/Hide"/></td>
    <td><input class="button" type="button" value="Show/Hide"/></td>
  </tr>
  <tr>
    <th scope="col">Column 1</th>
    <th scope="col">Column 2</th>
    <th scope="col">Column 3</th>
    <th scope="col">Column 4</th>
    <th scope="col">Column 5</th>
  </tr>
  <tr class="columnMe">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr class="columnMe">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr class="columnMe">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr class="columnMe">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
</tbody>

JavaScript

$("document").ready(function() {
    
$( ".button" ).click(function() {
    var t=$(this).parent('td');
    var number= $( "td" ).index( t );
    number=number+1;
    if($('tr.columnMe td:nth-child('+number+')').css('visibility')=='hidden'){
    $('tr.columnMe td:nth-child('+number+')').css('visibility','visible');
    }else{
        $('tr.columnMe td:nth-child('+number+')').css('visibility','hidden');
    }
});
});