Huecos al ocultar filas en Firefox

[daniloquispe]

Hola chicos:

Estoy realizando una aplicacion que muestra elementos en una tabla y, dependiendo de lo que elija en un grupo de botones de radio una de estas filas debe mostrarse u ocultarse. A la fila que quiero mostrar y ocultar le puse el ID "filacosto" (o sea la etiqueta que denota la fila es: <tr id="filacosto">...</tr>).

El código para el boton de radio que oculta la fila es el siguiente:

Código HTML:

<input type="radio" name="opciones" id="opciones" onclick="document.getElementById('filacosto').style.display = 'none'" /> 

Hay un segundo boton de radio que tiene el mismo código en el evento onclick pero asigna "block" a la propiedad "display" del estilo de la fila.

La cosa funciona bien en Internet Explorer, pero en Firefox pasan 2 cosas:

• Se desajustan los anchos de las celdas, aparecen con el ancho ajustado al texto que contiene cada celda
• Cuando la fila la oculto (display: none) después de haberla mostrado, en la zona donde se mostraba la fila queda un hueco. Si continuamente muestro y oculto la fila el hueco se va haciendo más grande cada vez.

¿Cómo puedo arreglar esto?

[JavierB]

Hola daniloquispe

Me parece que en Firefox hay que utilizar table-row en lugar de block

Prueba así, creo que funciona en IE y Firefox:

Código:

document.getElementById('filacosto').style.display = ''

Saludos,

[daniloquispe]

Hola:

Gracias por respoder tan rápido. Probé con "table-row" pero el efecto es el mismo (huecos y celdas desalineadas).

Probé con "" y, en un primer momento las celdas se siguen viendo chuecas, pero cuando el contenido de las celdas se actualiza se reacomodan los anchos (se sigue viendo chueco por unos instantes porque actualizar el contenido de las celdas demora (se actualiza desde una base de datos mediante AJAX) y el efecto como que no es muy agradable). Y en cuanto a los huecos, éstos se siguen viendo.

Gracias de todos modos, seguiré probando.

Danilo

Iniciado por JavierB

Hola daniloquispe

Me parece que en Firefox hay que utilizar table-row en lugar de block

Prueba así, creo que funciona en IE y Firefox:

Código:

document.getElementById('filacosto').style.display = ''

Saludos,

[Shiryu_Libra]

pues en mi caso, utilizo algo similar por medio de una funcion, en donde los estilos, ademas del que JAvierB(), ya te puso, tambien le agrego el visibility=hidden...

esta es mi funcion... yo oculto tablas generadas en reportes, asi solo estreso una ves el servidor y ya despues solo voy mostrando cada una de las tablas mediante un boton.... en su caso tu pudieras utilizar tus checkbox

Código PHP:

  <script type="text/javascript" language="javascript">
  <!-- var cap var ante function Ejemplo(idCapa){ if (document.all) cap = eval(idCapa + ".style"); if (document.getElementById) cap = eval('document.getElementById("' + dCapa + '").style'); if ((cap.visibility == "hidden") || (cap.visibility == "hide"))  {cap.visibility="visible" ; cap.display=""; } else { cap.visibility="hidden"; cap.display="none";}if (ante==null) {ante=cap;} else {if (ante!=cap){ante.visibility="hidden" ; ante.display="none"; ante=cap;} }}//-->
</script>  
  

en tu ejemplo la mandarias llamar de esta manera

Código:

<input type="radio" name="opciones" id="opciones" onclick="Ejemplo('filacosto') /> 

la e probado en Opera, Netscape, Firefox y Ieplorer... todas funciona perfecto

espero te sirva
suerte

[daniloquispe]

Hola a todos:

Pasó mucho tiempo desde que entré a este foro. La cuestión de las filas sólo se resolvió a medias porque me salí del trabajo en donde estaba y el proyecto se lo asignaron a otro :S

Bueno, al menos se resolvió lo de las filas chuecas, así que gracias javierB y en general a todos quienes aportaron con respuestas y sugerencias.