Hola a todos.
Tengo una duda que a ver si me la podéis solucionar.
Necesito hacer un menú en una tabla, en el que haya unas columnas (Tr) ocultas y al hacer click en la columna de arriba se muestren. Es como un submenú dentro de la tabla. A ver si con esta imagen lo ven mejor:
Al hacer click en la celda Menú 1 se muestran las columnas Menú 1.1, Menú 1.2 y Menú 1.3. Las 3 a la vez, sólo con hacer click en la celda Menú 1.
Os pongo lo que tengo y a ver si lo solucionamos:
HTML
Código:
<TABLE BORDER="1" WIDTH="100px">
<TR><TD ONCLICK="Mostrar(menuoculto)">Menú 1</TD></TR>
<TR ID="menuoculto" STYLE="display:none;"><TD> - Menú 1.1</TD></TR>
<TR ID="menuoculto" STYLE="display:none;"><TD> - Menú 1.2</TD></TR>
<TR ID="menuoculto" STYLE="display:none;"><TD> - Menú 1.3</TD></TR>
<TR><TD>Menú 2</TD></TR>
<TR><TD>Menú 3</TD></TR>
<TR><TD>Menú 4</TD></TR>
</TABLE>
JavaScript
Código:
function Mostrar(Div)
{
if (Div.style.display == "none")
{
Div.style.display = ""
}
else
{
Div.style.display = "none"
}
}
Según he leído en otros temas el problema está en que las columnas que están ocultas y que quiero mostrar tienen el mismo id. Creo que los ids que quiero mostrar tengo que renombrarlos así: menu1.1, menu1.2 y menu1.3. Luego hay que hacer un bucle con un contador en el código JavaScript y concatenarlo con los id que quiero mostrar. Pero antes necesito obtener con el document.getElementById(id) el id pero no se como se hace...
Saludos!