Nada...
La situacion es la siguiente con el codigo:
Código PHP:
<html>
<head>
<title>id Form</title>
<script language="javascript">
function ocultaTodo() {
if (document.getElementById) {
var elemento = document.getElementById("grupos");
elemento.style.display = "none";
var elemento = document.getElementById("botones");
elemento.style.display = "none";
}
var elementog = document.getElementById("grupos");
var elementob = document.getElementById("botones");
alert("Termina ocultaTodo BOTONES: "+elementog.style.display+" GRUPOS: "+elementob.style.display);
}
function mostrarBotones(oculta,muestra) {
if (oculta.length != 0 ) {
var el = document.getElementById(oculta); //se define la variable "el" igual a nuestro div
el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
}
if (muestra.length != 0 ) {
var el = document.getElementById(muestra);
el.style.display = (el.style.display == 'none') ? 'block' : 'none';
}
var elementog = document.getElementById("grupos");
var elementob = document.getElementById("botones");
alert("Termina mostrarBotones BOTONES: "+elementog.style.display+" GRUPOS: "+elementob.style.display);
}
</script>
</head>
<body onLoad="ocultaTodo()">
<table>
<form name="form1" method="post">
<div id="formulario">
<tr>
<td class="clasetd">Codigo Reporte:
</td>
<td>
<input type="text" id="codigo" name="codigo" value="" class="claseinput" style="width:50px;">
</td>
</tr>
<tr>
<td class="clasetd">Nombre Reporte:
</td>
<td>
<input type="text" id="nombre" name="nombre" value="" class="claseinput" style="width:450px;" onChange="mostrarBotones('','botones');">
</td>
</tr>
</div>
<table id="grupos">
<tr>
<td class="clasetd">Grupos de Columnas:
</td>
<td>
<input type="text" id="grup" value="" class="claseinput" style="width:30px;">
</td>
<tr>
<td class="clasetd">Nro. Columnas:
</td>
<td>
<input type="text" id="cols" value="" class="claseinput" style="width:30px;">
</td>
</tr>
</table>
<table id="botones">
<tr>
<td colspan="2">
<input type="image" id="definir" name="accion" onClick="mostrarBotones('botones','grupos');" src="./imagenes/painter1.gif">
</td>
</tr>
</table>
<div id="resul">
<tr></tr>
</div>
</form>
</table>
</body>
</html>
1. El comportamiento de las etiquetas
DIV y
TABLE en lo que respecta al atributo
style="display=...." es diferente. Al asignar este atributo a el tag DIV al cargar la pagina se hace visible aun cuando se defina
display:none . Caso contrario a la etiqueta TABLE.
2. La funcion
ocultarTodo() llamda con el evento
onLoad en BODY trabaja bien, es decir, oculta los dos tags TABLE (grupos y botones).
3. La funcion
mostrarBotones() tambien hace bien lo que debe hacer al momento de la llamada. El lio que veo es que cuando termina de ejecutar debe ocultar
botones y mostrar
grupos y por algun raro motivo hace un reload de la pagina.
De acuerdo a esto, como se hace para que no ocurra el reload de la pagina?