Ocultar parte de la pagina
Tengo una tabla con varios registros y me gustaria que al clickear en uno de los registros me mostrase otra pantalla con los otra tabla dependiendo del registro seleccionado, pero tengo que hacer todo dentro de la misma página html. SerÃa ocultando la primera tabla y mostrando la segunda. ¿Me podeis ayudar? ¿Como lo hago?¿Con iFrames?.
GRACIAS
GRACIAS
Te aconsejo que uses la propiedad de display block o none que soportan casi todos los tags de html.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT language="javascript">
function MostrarOcultar (objetoVisualizar) {
if (document.all[objetoVisualizar].style.display=='none') {
document.all[objetoVisualizar].style.display='block';
} else {
document.all[objetoVisualizar].style.display='none';
}
}
</SCRIPT>
</HEAD>
<BODY marginwidth="0" marginheight="0">
<TABLE WIDTH="100%" ALIGN="CENTER" border="1" cellspacing="1" cellpadding="0">
<tr>
<td width="50%" align="center" valign="middle">
Valor
</td>
<td width="50%" align="center" valign="middle">
Descripción
</td>
</tr>
<tr>
<td valign="middle">
<SPAN onmouseover="this.style.textDecoration='underline';this.style.cursor='hand'" onMouseOut="this.style.textDecoration='none'" onClick="JavaScript:MostrarOcultar('Datos1');">
Valor 1
</SPAN>
</td>
<td valign="middle" >Descripcion
</td>
</tr>
<TR id=Datos1 style="display:none">
<TD colspan="2">
<TABLE WIDTH="100%" ALIGN="CENTER" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" valign="middle">
TABLA OCULTA 1
</td>
</tr>
</TABLE>
</TD>
</TR>
<tr>
<td valign="middle">
<SPAN onmouseover="this.style.textDecoration='underline';this.style.cursor='hand'" onMouseOut="this.style.textDecoration='none'" onClick="JavaScript:MostrarOcultar('Datos2');">
Valor 2
</SPAN>
</td>
<td valign="middle">Descripcion
</td>
</tr>
<TR id=Datos2 style="display:none">
<TD colspan="2">
<TABLE WIDTH="100%" ALIGN="CENTER" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" valign="middle">
TABLA OCULTA 2
</td>
</tr>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Ejemplo:
<HTML>
<HEAD>
<TITLE>Ejemplo</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT language="javascript">
function MostrarOcultar (objetoVisualizar) {
if (document.all[objetoVisualizar].style.display=='none') {
document.all[objetoVisualizar].style.display='block';
} else {
document.all[objetoVisualizar].style.display='none';
}
}
</SCRIPT>
</HEAD>
<BODY marginwidth="0" marginheight="0">
<TABLE WIDTH="100%" ALIGN="CENTER" border="1" cellspacing="1" cellpadding="0">
<tr>
<td width="50%" align="center" valign="middle">
Valor
</td>
<td width="50%" align="center" valign="middle">
Descripción
</td>
</tr>
<tr>
<td valign="middle">
<SPAN onmouseover="this.style.textDecoration='underline';this.style.cursor='hand'" onMouseOut="this.style.textDecoration='none'" onClick="JavaScript:MostrarOcultar('Datos1');">
Valor 1
</SPAN>
</td>
<td valign="middle" >Descripcion
</td>
</tr>
<TR id=Datos1 style="display:none">
<TD colspan="2">
<TABLE WIDTH="100%" ALIGN="CENTER" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" valign="middle">
TABLA OCULTA 1
</td>
</tr>
</TABLE>
</TD>
</TR>
<tr>
<td valign="middle">
<SPAN onmouseover="this.style.textDecoration='underline';this.style.cursor='hand'" onMouseOut="this.style.textDecoration='none'" onClick="JavaScript:MostrarOcultar('Datos2');">
Valor 2
</SPAN>
</td>
<td valign="middle">Descripcion
</td>
</tr>
<TR id=Datos2 style="display:none">
<TD colspan="2">
<TABLE WIDTH="100%" ALIGN="CENTER" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" valign="middle">
TABLA OCULTA 2
</td>
</tr>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>