Tablas ocultas y desplegables

[javascripter]

Buenos dias a todos los scripters:

Vereis cual es mi problema, que por lo menos a mi me parece bastante complicadillo, vamos a ver, tengo dos tablas, que seguro que mas de uno ha manejado en algún ejemplo, estas son las miticas tablas de cabeceras de facturas y lineas de facturas.

Pues bien, lo que quiero hacer es mostrar una tabla con todas las cabeceras de facturas que tiene un cliente y que cada linea(toda ella) de la tabla al pasar el cursor por encima fuera un link, y que si "clicko", insisto en cualquier parte de la linea, se despliegue la tabla con las lineas pertenecientes a esa factura sin la necesidad de cargar otra pagina, y claro, que el resto de las cabeceras queden por debajo o por encima, segun la linea en la que hayamos pulsado.

Agradezco todos los comentarios. Muxas gracias.

[TurKa]

y que tal si usas display = 'block'?

Algo así:

<table width="100%">
<tr>
<td width="100%" onClick="document.getElementById('tabla_a_desplega r').style.display = 'block'">cabecera</td>
</tr>
<tr>
<td width="100%">
<table width="100%" id="tabla_a_desplegar" style="display: none">
<tr>
<td width="100%">hola</td>
</tr>
</table>
</td>
</tr>
</table>

Después para volver a ocultar puedes usar

style.display = 'none'

[marcopoloaz06]

hOla!, Mejorando un poko el Scrip de TurKa aka te lo dejo ya con la Opcion de
display:none

Código HTML:

<script type="teXt/javascript">
function desplegar(tabla_a_desplegar,estadoT) {
var tablA = document.getElementById(tabla_a_desplegar);
var estadOt = document.getElementById(estadoT);

	switch(tablA.style.display) {
	case "none":
	tablA.style.display = "block";
	estadOt.innerHTML = "Ocultar coneNido"
	break;
		default:
		tablA.style.display = "none";
		estadOt.innerHTML = "Mostrar coNteNido"
		break;
}
}
</script> 

Código HTML:

<table border="1">
<tr>
<td onClick="desplegar('tabla_a_desplegar','estadoT')">cabecera</td>
</tr>
<tr>
<td>
<table border="1" id="tabla_a_desplegar" style="display: none;">
<tr>
<td>hola</td>
</tr>
</table>
</td>
</tr>
</table>


<table style="position:absolute; left: 182px; top: 14px;" border="1">
<tr>
<td onClick="desplegar('tabla_a_desplegar2','estadoT2')">cabecera</td>
</tr>
<tr>
<td>
<table border="1" id="tabla_a_desplegar2" style="display: none;">
<tr>
<td>hola</td>
</tr>
</table>
</td>
</tr>
</table>

<div id="estadoT">Mostrar ContenidO</div>   
<div align="center" id="estadoT2">Mostrar ContenidO</div> 

ze me olvidava el DIV =D
Los 2 ID y el DIV deven conisidir como ya sabras, bBuUuenNoOo
hAver si te sirve
SaludOz!