___ ___ erkimt How hidden an entire column in a table with javascript / jquery? ______ qstntxt ___

I want to show / hide a column of a table using javascript / jquery .

Pressing a button shows or hides the entire column. The name of the column is on TH identified by an id I have achieved this by adding a class to each TD but I do not like this solution, I would like to achieve it without adding so much class attribute.

%pre% %pre%

    

______ azszpr135702 ___

Without so much code can be fixed by putting 1 button, instead of 2.

Unless it's strictly necessary, I think it's better if you only have one button, that you make %code% that commutes the visibility of the column.

To do this, we select the header with %code% and hide it or show it with %code% .

To hide / show the rows, we can make a small filter like this:

%pre%

which means: Take the %code% that are your father's third child. The parent is the row %code% and the third child is the %code% in the Country column.

and to them you apply the %code% as well.

With this you save putting the %code% to each element you want to hide.

%pre% %pre%

    

______ azszpr135706 ___

To hide with %code% , without Jquery, it occurs to me that since you already have a class that identifies you, you can use them to add a class %code% , for example.

%pre% %pre% %pre%

If you also take into account the modification of %code% , you could delete the classes of each %code% and only add a %code% to the table as well as remove a button and have only %code% that works as a %code% , but all only with only %code%

%pre% %pre% %pre%

    

______ azszpr135708 ___

You can also do the following from CSS:

%pre%

Or have a class hide in CSS and by means of javascript, add the class:

%pre%     

___

let btnocultar = document.getElementById('ocultar');
let btnmostrar = document.getElementById('mostrar');
//buscamos las celdas con la clase pais
let celdas = document.querySelectorAll('.pais');

btnocultar.addEventListener('click',function(){
  //iteramos y añadimos la clase hidden
  celdas.forEach(function(el){
   el.classList.add('hidden');
  });
	
});

btnmostrar.addEventListener('click',function(){
//iteramos y removemos la clase hidden
  celdas.forEach(function(el){
   el.classList.remove('hidden');
  });
});

.hidden{
  display: none;
 }

<table class="mitabla">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th class="pais">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td class="pais">Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td class="pais">Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td class="pais">Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td class="pais">UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td class="pais">Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td class="pais">Italy</td>
  </tr>
</table>

<button id="ocultar">Ocultar columna pais</button>
<button id="mostrar">Mostrar columna pais</button>

let btn = document.getElementById('ocultar');
let table = document.getElementById('mitabla');
btn.addEventListener('click',function(){
  //Iteramos las filas y accedemos a la tercera celda  [2]
  for (var i = 0, row; row = table.rows[i]; i++){
     row.cells[2].classList.toggle('hidden');
  }
});

.hidden{ display: none; }

<table id="mitabla">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th >Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td >Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td >Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td >Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td >UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td >Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td >Italy</td>
  </tr>
</table>

<button id="ocultar">Mostrar/Ocultar</button>