Problema con codigo JScript

ren · #1 (**permalink**) 15/08/2007, 09:35

hola mundo, tengo un pequeño inconveniente y no se como resolverlo,
bueno tengo el siguiente codigo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">

</script>

</head>
<body>

<table summary="" align="center" width="140" border="1" bgcolor="#ffffff">
<tr>
<td bgcolor="#c0c0c0" align="center">
<a href='javascript:mVista(document.getElementById("F ila1"));'>Principal</a>
</td>
</tr>
<tr id="Fila1" style="display:block">
<td>
<div>Opcion1</div>
<div>Opcion2</div>
<div>Opcion3</div>
</td>
</tr>
</table>

<table summary="" align="center" border="1">
<tr>
<td>Hola mundo</td>
</tr>
</table>
</body>
</html>

Bueno este codigo(simple por cierto) me funciona barbaro en IExplorer pero en Mozilla Firefox no me funciona como debria ser, ¿eso a que se debe?
Agradesco desde ya su ayuda a toda la comunidad

johnj · #2 (**permalink**) 15/08/2007, 09:47

Saludos Amigo,

Veo que cada vez que oculta y muestra la tabla se debe se genera scroll. Para solucionar esto cambia el valor de todos los display que estan en "block" tanto javascript como en el HTML por "" solamamente.

demiurgo_daemon · #3 (**permalink**) 15/08/2007, 10:09

Hola,

probé tu código y, según yo, te refieres a que cada vez que llamas la función se va haciendo más grande la tabla. La cosa es que el valor correcto para display en <tr> es table-row; sin embargo, Explorer como siempre no la soporta

. Puedes hacer pruebas de navegador para usar un valor o el otro, pero la gente que hizo cosas como Prototype o Mootools ya tuvo que lidiar con todo eso y tiene soluciones completas. Te recomiendo usar una de esas librerías.

saludos

demiurgo_daemon · #4 (**permalink**) 15/08/2007, 10:10

la solución de johnj funciona perfectamente!!

derkenuke · #5 (**permalink**) 15/08/2007, 17:21

Lo he podido solucionar así, lo que pasa es que hay que hacer complejidades con el try y el catch, que siempre es preferible a utilizar la detección del navegador en sí, nos asegura más compatibilidad. Me he basado en la propiedad table-row, como bien ha dicho demiurgo_daemon. La opción de dejarlo en "" (por defecto) no la he probado, pero debería funcionar igualmente.

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 
<html>

<head>

<title>Untitled</title>

<script  type="text/javascript">

<!--

function mVista(objeto){

    var elDisplay = objeto.style.display;

    if ( elDisplay== "none" ) {

        try {

            objeto.style.display = "table-row";

        }

        catch(elError) {            // elError es el propio navegador IE...

            objeto.style.display = "block";

        }

    }

    else {

        objeto.style.display = "none";

    }

    return false;

}

//-->

</script>

 
</head>

<body>

 
<table summary="" align="center" width="140" border="1" bgcolor="#ffffff">

    <tr>

        <td bgcolor="#c0c0c0" align="center">

            <a href="#" onclick='mVista(document.getElementById("Fila1"));'>Principal</a>

        </td>

    </tr>

    <tr id="Fila1" style="display:table-row;">

        <td>

            <div>Opcion1</div>

            <div>Opcion2</div>

            <div>Opcion3</div>

        </td>

    </tr>

</table>

 
<table summary="" align="center" border="1">

    <tr>

        <td>Hola mundo</td>

    </tr>

</table>

 
 
</body>

</html>

Un saludo.