JSFiddle - React, Tailwind, and code Playground

by Florent27000

HTML

<a class="hideshowcol" data-colonne="0">col 0</a>
<table>
  <tr>
    <td>Nom</td>
    <td>Prénom</td>
    <td>Age</td>
    <td>Mail</td>
  </tr>
  <tr>
    <td>Giraud</td>
    <td>Pierre</td>
    <td>28</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Joly</td>
    <td>Pauline</td>
    <td>27</td>
    <td>[email protected]</td>
  </tr>
</table>

JavaScript

$(function(){

    $("a.hideshowcol").on( "click",function(event){
    	event.preventDefault();
    
    	 var data = $(this).attr("data-colonne"); // recupére le numero de colonne definit dans la balise <a>
       
      var i=-1; 
      var max= $('tr').length; // définit le nombre de ligne dans le tableau
      while(++i < max){ // parcourt ligne après ligne du tableau
        var j=-1; //définit le numero de la colonne commençant à -1
        $('tr').eq(i).children('td').each(function(){
          if(data == ++j){ //si le numero de la colonne = la valeur data
            $(this).toggle(0,function(){ }); // ton affiche ou masque la celule td
          }
        });
      }
    });


})