Ocultar columnas con Javascript

Mediante el uso de Javascript podemos ocultar las columnas de una tabla html facilmente.
En este ejemplo,aunque no es necesario para ocultar las columnas, se diferencia entre la cabecera de la tabla  "<thead><tr><th>Título columna</th><tr></thead>" y el cuerpo "<tbody><tr><td></td></tr></tbody>".


Por lo tanto la tabla quedaría de este modo:

//el id de la tabla se utilizará en la función javascript
<table id='tabla'>
  <thead>
    <tr>
      <th>Título columna1</th>
      <th>Título columna2</th>
      <th>Título columna3</th>
      <th>Título columna4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>columna1</td>
      <td>columna2</td>
      <td>columna3</td>
      <td>columna4</td>
    </tr>
    <tr>
      <td>columna1</td>
      <td>columna2</td>
      <td>columna3</td>
      <td>columna4</td>
    </tr>
    <tr>
      <td>columna1</td>
      <td>columna2</td>
      <td>columna3</td>
      <td>columna4</td>
    </tr>
  </tbody>
</table>

El código javascript que oculta las columnas es el siguiente:

<script>
//la función recibe como parámetros el numero de la columna a ocultar
function ocultarColumna(num,ver)
{
  //aquí utilizamos el id de la tabla, en este caso es 'tabla'
  fila=document.getElementById('tabla').getElementsByTagName('tr');

 //mostramos u ocultamos la cabecera de la columna
 if (fila[0].getElementsByTagName('th')[num].style.display=='none')
    {
    fila[0].getElementsByTagName('th')[num].style.display=''
    }
  else
    {
    fila[0].getElementsByTagName('th')[num].style.display='none'
    }
   //mostramos u ocultamos las celdas de la columna seleccionada
  for(i=1;i<fila.length;i++)
    {
        if (fila[i].getElementsByTagName('td')[num].style.display=='none')
            {
                fila[i].getElementsByTagName('td')[num].style.display=''; 
             }     
        else
            {
             fila[i].getElementsByTagName('td')[num].style.display='none'
            }      
    }        
   
}
</script>


Llamamos a la función desde un enlace, por ejemplo:

<a href='javascript:ocultarColumna(0)'>Ocultar/Mostrar columna 1</a>
<a href='javascript:ocultarColumna(1)'>Ocultar/Mostrar columna 2</a>
<a href='javascript:ocultarColumna(2)'>Ocultar/Mostrar columna 3</a>
<a href='javascript:ocultarColumna(3)'>Ocultar/Mostrar columna 4</a>

0 comentarios:

Publicar un comentario