Ocultar/mostrar filas de una tabla

[daniloquispe]

Hola chicos:

Esta pregunta se parece a una que mandé hace tiempo. Resulta que tengo una tabla HTML donde una de sus filas debe estar oculta al inicio para luego mostrarse al hacer clic en un enlace. Para ese entonces yo tenía un código que funcionaba bien en Internet Explorer 6 y más o menos en Firefox.

Bueno... El código HTML de mi tabla es:

Código HTML:

<table class="tblgestion">
  <!-- Esta fila sale oculta -->
  <tr id="filaoculta" style="display: none">
    <!-- Celdas y más celdas... -->
  </tr>
</table> 

El código de mi enlace que mostrará/ocultará la fila es:

Código HTML:

<a href="" onclick="document.getElementById('filafiltros').style.display = document.getElementById('filafiltros').style.display == 'none' ? 'table-row' : 'none'; return false">Mostrar</a> 

El caso es que este código funcina muy bien en Firefox, que es mi navegador predeterminado, y en Opera; pero la pega es que la gente que usará la web que estoy haciendo usa Internet Explorer 7. Lo pruebo en ambos navegadores y en ambos la fila se muestra oculta al principio (lo que significaroa que ambos navegadores reconocen lo que es "style.display"); pero cuando hago clic en el vínculo estando en IE7 alli (oh sorpresa!) no funciona (arroja un error "No se pudo obtener la propiedad display . Argumento no válido").

Este tipo de cosas me revienta: que un código funcione enun navegador y en el otro no; pero en fin... ¿Cómo lo puedo arreglar? ¿Se puede arreglar?

Gracias

[txels]

Yo mejor que display usaría una propiedad mas antigua y que funcoina en todos los navegadores: visibility

así quedaría:

<table class="tblgestion">
<!-- Esta fila sale oculta -->
<tr id="filaoculta" style="visibility:hidden;">
<!-- Celdas y más celdas... -->
</tr>
</table>


<a href="" onclick="Muestra(idTabla)">Mostrar</a>

<script language="javascript" type="text/javascript">
function Muestra(idTabla){

document.getElementById(idTabla).style.visibility = "visible";


}
</script>



se que no es lo mismo, pues deja el hueco que ocupa, pero te podría valer...

[daniloquispe]

Iniciado por txels

Yo mejor que display usaría una propiedad mas antigua y que funcoina en todos los navegadores: visibility

así quedaría:

<table class="tblgestion">
<!-- Esta fila sale oculta -->
<tr id="filaoculta" style="visibility:hidden;">
<!-- Celdas y más celdas... -->
</tr>
</table>


<a href="" onclick="Muestra(idTabla)">Mostrar</a>

<script language="javascript" type="text/javascript">
function Muestra(idTabla){

document.getElementById(idTabla).style.visibility = "visible";


}
</script>



se que no es lo mismo, pues deja el hueco que ocupa, pero te podría valer...

Hola:

Gracias por la respuesta. Esta vez funciona en ambos navegadores (IE y Firefox); pero... Ya lo dijiste, deja un hueco en el lugar donde cae la celda, y la verdad no se ve bien.

Estuve haciendo pruebas y me topé con esto: Cambié el código del enlace:

Código HTML:

<a href="" onclick="mostrarFiltros(); return false">Mostrar</a> 

y definí mi función mostrarFiltros() así (OJO con los números de línea que pongo):

Código HTML:

<script type="text/javascript">
    function mostrarFiltros()
    {
        var filtro = document.getElementById('filafiltros').style.display;  // 1
        filtro = filtro == 'none' ? 'table-row' : 'none';  // 2
        document.getElementById('filafiltros').style.display = filtro;  // 3
    }
</script> 

El código es exactamente el mismo, sólo cambia la estructura, y evidentemente sigue fallando en IE7. Pero lo curioso es que el mensaje de error sobre la propiedad display sale en la linea 3 (o sea que en la línea 1 IE7 SÍ reconoce el display pero en la línea 3 NO la reconoce). ¿Es acaso display de sólo lectura en IE7?

¿Hay alguna otra solución?

[zyon]

que tal, tengo una duda, tu indicas:

filtro = filtro == 'none' ? 'table-row' : 'none';

el valor de 'table-row' que hace? por que en display io solo conocia 'none ' y 'block'

[daniloquispe]

Iniciado por zyon

que tal, tengo una duda, tu indicas:

filtro = filtro == 'none' ? 'table-row' : 'none';

el valor de 'table-row' que hace? por que en display io solo conocia 'none ' y 'block'

Hola zyon:

Ese 'table-row' sirve también para mostrar un elemento como visible, igual que 'block' pero es específico para filas de tabla. Me ha pasado casos en los que cuando usaba 'block' en vez de 'table-row' la fila en cuestión se llegaba a mostrar pero con las celdas desalineadas (esto pasaba en Firefox cuando, así como ahora, ocultaba la fila y luego la volvía a mostrar); pero con este table-row ya se veían bien.

Y aparte hay varios más, no sólo esos 3.

Saludos

[zyon]

a io crei que solo habia dos valores para DISPLAY, le hechare una revisadita a esa propiedad....Gracias.

[demiurgo_daemon]

Hola,

Explorer es medio disléxico y no reconoce table-row, así que puedes usar esto:

Código:

filtro = filtro == 'none' ? '' : 'none';

así, tomas el estilo por defecto -que en los navegadores de verdad es, en efecto, table-row pero en Explorer es block-.

Tuve un problema similar y encontré la respuesta en estos foros, pero no sé en dónde.

saludos

[daniloquispe]

Iniciado por demiurgo_daemon

Hola,

Explorer es medio disléxico y no reconoce table-row, así que puedes usar esto:

Código:

filtro = filtro == 'none' ? '' : 'none';

así, tomas el estilo por defecto -que en los navegadores de verdad es, en efecto, table-row pero en Explorer es block-.

Tuve un problema similar y encontré la respuesta en estos foros, pero no sé en dónde.

saludos

Perfecto, ya funciona incluso en los 3 navegadores (IE, FF y Opera). Gracias!!