Mostrar Y Ocultar Filas Con Javascript

Esta técnica permite mostrar y ocultar filas de una tabla, para poder, por ejemplo,entregar mayor información a nuestros usuarios.

A continuación se muestra una función en Javascript que muestra y oculta una fila, dependiendo del estado actual de la misma.

function cambiarDisplay(id) {
  if (!document.getElementById) return false;
  fila = document.getElementById(id);
  if (fila.style.display != "none") {
    fila.style.display = "none"; //ocultar fila
  } else {
    fila.style.display = ""; //mostrar fila
  }
}

Si la fila está visible, entonces al llamar a la función, la fila será ocultada y viceversa. Lo que hace la función es cambiar la propiedad display del elemento. Para ocultarlo, establece su valor a none y para mostrarlo establece su valor a una cadena vacía. este punto es importante porque permite a cada navegador ocupar el valor por defecto para esa propiedad (Firefox usa "table-row", Internet Explorer y Opera usan "block").

Veamos un ejemplo de su aplicación. El siguiente código muestra una tabla con 2 filas. La primera corresponde a un título y la segunda una descripción en detalle. Al hacer clic en el título, se muestra la fila de detalle.

<table>
  <tr id="row1" onClick="cambiarDisplay('row2')">
   <td><strong> Televisores de LCD, Pantalla de Cristal L&iacute;quido</strong> (Stock: 90 unidades ) </td>
  </tr>
  <tr id="row2" onClick="cambiarDisplay('row2')" style="display:none">
   <td>Los Televisores de LCD brindan la m&aacute;s alta calidad de im&aacute;gen dentro de la gama de modelos de pantallas planas, lo que los convierte en una excelente opci&oacute;n para los m&aacute;s exquisitos. </td>
  </tr>
</table>

Como se puede apreciar cada fila tiene establecido un identificador. La segunda fila está oculta por defecto a través de la propiedad style.

Para que la función trabaje correctamente el navegador debe manejar DOM. El script ha sido probado en Firefox 1.5, Internet Explorer 5.0 y superior y Opera 9. Si encuentras problemas en otros navegadores por favor hazlo saber en los comentarios.