cerrar tablas al abrir otras [importante]

desinglive · #1 (**permalink**) 13/03/2009, 03:13

Hola necesito saber como puedo cerrar tablas, al abrir otras. aqui os pongo el codigo, se abren las 4 si las pulso, pero yo quiero que se cierren todas cuando abra una, y si abro otra que se cierre esa.

<script language="javascript">
function cambiarDisplay(id) {
if (!document.getElementById) return false;
fila = document.getElementById(id);
if (fila.style.display != "none") {
fila.style.display = "none";
} else {
fila.style.display = "";
}
}
</script></head>

<body>
<table align="center">
<tr id="row1" onClick="cambiarDisplay('row2')">
<td width="55"><div align="center"><strong>Prueba1</strong></div></td>
</tr>
<tr id="row2" onClick="cambiarDisplay('row2')" style="display:none">
<td><div align="center">texto Prueba 1 </div></td>
</tr>
</table>
<table align="center">
<tr id="row11" onClick="cambiarDisplay('row22')">
<td width="55"><div align="center"><strong>Prueba2</strong></div></td>
</tr>
<tr id="row22" onClick="cambiarDisplay('row22')" style="display:none">
<td><div align="center">texto Prueba 2 </div></td>
</tr>
</table>
<table align="center">
<tr id="row111" onClick="cambiarDisplay('row222')">
<td width="55"><div align="center"><strong>Prueba3</strong></div></td>
</tr>
<tr id="row222" onClick="cambiarDisplay('row222')" style="display:none">
<td><div align="center">texto Prueba 3 </div></td>
</tr>
</table>
<table align="center">
<tr id="row1111" onClick="cambiarDisplay('row2222')">
<td width="55"><div align="center"><strong>Prueba4</strong></div></td>
</tr>
<tr id="row2222" onClick="cambiarDisplay('row2222')" style="display:none">
<td><div align="center">texto Prueba 4 </div></td>
</tr>
</table>
</body>
</html>

ceSharp · #2 (**permalink**) 13/03/2009, 05:39

Hola designlive,

Te paso una forma de hacerlo:

<script type="text/javascript">
function cambiarDisplay(id)
{
if(document.getElementById(id).style.display == "")
document.getElementById(id).style.display = "none";
else
{
for (i=0;i<4;i++)
{
if(id != 'row'+(i+1))
document.getElementById('row'+(i+1)).style.display = "none";
else
document.getElementById('row'+(i+1)).style.display = "";
}
}
}
</script>

</head>
<body>
<table align="center">
<tr onclick="cambiarDisplay('row1')">
<td width="55">
<div align="center">
<strong>Prueba1</strong></div>
</td>
</tr>
<tr id="row1" onclick="cambiarDisplay('row1')" style="display: none">
<td>
<div align="center">
texto Prueba 1
</div>
</td>
</tr>
</table>
<table align="center">
<tr onclick="cambiarDisplay('row2')">
<td width="55">
<div align="center">
<strong>Prueba2</strong></div>
</td>
</tr>
<tr id="row2" onclick="cambiarDisplay('row2')" style="display: none">
<td>
<div align="center">
texto Prueba 2
</div>
</td>
</tr>
</table>
<table align="center">
<tr onclick="cambiarDisplay('row3')">
<td width="55">
<div align="center">
<strong>Prueba3</strong></div>
</td>
</tr>
<tr id="row3" onclick="cambiarDisplay('row3')" style="display: none">
<td>
<div align="center">
texto Prueba 3
</div>
</td>
</tr>
</table>
<table align="center">
<tr onclick="cambiarDisplay('row4')">
<td width="55">
<div align="center">
<strong>Prueba4</strong></div>
</td>
</tr>
<tr id="row4" onclick="cambiarDisplay('row4')" style="display: none">
<td>
<div align="center">
texto Prueba 4
</div>
</td>
</tr>
</table>
</body>
</html>

he retocado los ids de los rows porque, a mi estilo, un for recorre todos los ids de las filas y comprueba si es el del que se ha dado click y, si no es, lo oculta. Si quisieras añadir mas filas deberías de modificar el for para que recorra tantas filas como tú quieras que lo haga. es decir, si tienes 10 filas, en lugar de for(i=0;i<4;i++) deberías de poner for(i=0;i<10;i++)

salu2

desinglive · #3 (**permalink**) 13/03/2009, 06:35

entendido. muchas gracias=)