mostrar e ocultar tabelas

marvi · Setembro 19, 2008

Olá!

Pessoal, estou pegando uma informação do banco de dados e listando o titulo e o subtítulo desse titulo, mas gostaria de saber como faço para só exibir esses subtítulos quando clicarem no titulo? Tentei com javascript para ocultar as tabelas onde gera os subtítulos e nada.

Quero algo do tipo aquelas lojas virtuais que mostra a categorias e produtos daquela categorias, tipo: titulo: informática e subtítulo: acessórios

Exemplo:

Informática

- acessórios

Celular

- TIM

- Claro

Só que tentei fazer dessa forma e está mostrando a lista tudo ok, lógica certa que vem do banco de dados ok, mas o script de inibir e mostrar as subcategorias não funciona, na verdade, não acusa nada...fica neutro... confira:

<table id="AutoNumber5" style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="1" cellSpacing="0" cellPadding="0" width="100%" border="0">

<%
conta = 0
While Not rsCategoria.EOF

codigo = rsCategoria("codigo")
nome = rsCategoria("Categoriaspai")
subnome = rsCategoria("Categoria")
conta = conta +1%>

<script>
function me(div) {
var divmm = document.getElementById('maismenos');
var divq = document.getElementById(div).style;
if (divq.display == 'none') {
divq.display = 'block';
//divmm.innerHTML = "dd";
}
else {
divq.display = 'none';
//divmm.innerHTML = "+";
}
}
</script><%

If conta = 1 Then%>

<tr>
<td width="100%" height="1"><img src="imagens/linhamenu1.jpg" border="0"></td>
</tr>
<tr>
<td width="100%" height="38"><font face="Impact" color="#ab9474" size="5">
<a onclick="me('essadiv');" href="#" style="text-decoration: none"><font color="#A15625"><%=nome%></font></a></font></td>
</tr>

<%
End If%>
<div id="essadiv" style="display: none;">

<tr>
<td width="100%" height="1"><img src="imagens/linhamenu1.jpg" border="0"></td>
</tr>
<td width="100%" height="38"><font face="Impact" color="#ab9474" size="4">
<a href="buscaemlinks.asp?pesquisa=<%= rsCategoria("COD_Categoria")%>" style="text-decoration: none"><font color="#AB9474">- <%=subnome%></font></a></font></td>
</tr>
</div>
<%rsCategoria.MoveNext

If Not rsCategoria.EOF Then
If rsCategoria("codigo") <> codigo Then
conta = 0
End If
End If

Wend
%>
</table>

Como resolver isso? Deve ser simples mas não sei...

Obrigado!

Marcelo

Giancarlo Braga · Setembro 21, 2008

Você vai precisar de Java Script, DOM e CSS.

DOM eu digo porque você vai ter que navegar pelo style de seus elementos.

document.getElementById("idDaTabela").style.display = 'block';

E o CSS digo pois você pode usar o 'display' do CSS e com o DOM você muda esse display em tempo de execução.

O que acontece é que no display, se você usar block, a tabela 'idDaTabela' que fiz de exemplo irá aparecer.

Se você usar none, assim: document.getElementById("idDaTabela").style.display = 'none'; , ela simplesmente vai se ocultar, retornando toda a estrutura da página em volta como se essa tabela não existisse.

Abraços,

Giancarlo Braga

marvi · Setembro 21, 2008

Olá!

Conseguir! O código está todo igual! Só mudei o final para o exemplo que vou mostrar abaixo:

<div id="exemplo<%=codigo%>" style="display: none;">
<% 
End If%>

<table   style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="1" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr  >
	<td   width="100%" height="1"><img src="imagens/linhamenu1.jpg" border="0"></td>
  </tr>
	<td   width="100%" height="38"><font face="Impact" color="#ab9474" size="4">
	<a href="buscaemlinks.asp?pesquisa=<%=rsCategoria("COD_Categoria")%>" style="text-decoration: none"><font color="#AB9474">- <%=subnome%></font></a></font></td>
</tr>
</table>



<%rsCategoria.MoveNext
If Not rsCategoria.EOF Then
If rsCategoria("codigo") <> codigo Then%>
</div>
<%
conta = 0
End If
End If
Wend
%>

Mas agora eu queria saber como manter a seção aberta? Tipo, a pessoa clica em CELULAR e exibi os subtítulos: - OI, - TIM, - Claro e quando alguém clica em TIM ele vai para página com os produtos da TIM mas os titulos e subtítulos devem ficar aberto extatamente em CELULAR que foi o qual a pessoa clicou antes para abrir, como fazer?

Tipo, clico em CELULAR e abre abaixo o nome TIM e assim clico em TIM e ele mostra a lista dos produtos de TIM mas mantendo o CELULAR aberto ainda mostrando a opção TIM, entendeu?

Sabe?

Obrigado!

Giancarlo Braga · Setembro 21, 2008

Usa asp.

Algo do tipo:

If trim(REQUEST.FORM("CAMPO")) <> ""  then
Response.Write("SELECTED")
end if

Abraço,

Giancarlo Braga.

marvi · Setembro 21, 2008

Nesse caso não são campos ali e sim links... Eu tinha feito algo do tipo

valor = var = request.querystring(var)

session("valor")=valor

if session("valor") <> "" then
manter os links abertos
else
fecha

mas nesse caso quero manter só um link especifico aberto... Entendeu?

Giancarlo Braga · Setembro 21, 2008

Manda uma msg pro moderador explicando o que ocorreu.

Olha,

Crie então IDs pra todos os links e só dê display = block se estiverem dentro da condição exigida.

marvi · Setembro 21, 2008

Criou um ID no link? Já mando dela o valor do link para o busca, não serve esse valor?

Pois esse comando <div id="exemplo<%=codigo%>" style="display: none;"> permite deixar todos links fechados, se coloco assim: <div id="exemplo<%=codigo%>" style="display: """> fica abertos...

Aí se faço

<a href="buscaemlinks.asp?pesquisa=<%= rsCategoria("COD_Categoria")%>" style="text-decoration: none"><font color="#AB9474">- <%=subnome%></font></a>

pego valor=request.querystring(pesquisa)

i

f valor <> "" then
<div id="exemplo<%=codigo%>" style="display: """>
else
<div id="exemplo<%=codigo%>" style="display: none;">

até que funciona... mas ele pega todos os links da div e deixa aberto em vez de deixar aberto determinado link que foi clicado...

Se clico em CELULAR abre tudo de celular como uma lista... ai clico em um nome dessa lista abre outra página e acaba expadindo o CELULAR que ja estava aberto porque cliquei antes e outros links que não forma abertos... ele generaliza todos, entende? e quero manter aberto só um, CELULAR

Giancarlo Braga · Setembro 21, 2008

Entendi mais ou menos, meu caro.

Mas se quer deixar só um, crie um sistema de regras para ele então dar um display em apenas um ID.

marvi · Setembro 21, 2008

Certo, amanha vou tentar fazer como você me falou para ver e aviso...

Grato

marvi · Setembro 21, 2008

Esse seriais de celular tem uma quantidade de caracters fixa? serial IEMI:

IMEI quer entrar em números de 15 dígitos ou 17 dígitos seqüências de números. Esses números podem identificar um microtelefone. Atualmente o formato do IMEI é AA-BBBBBB-CCCCCC-D.

Pois se for fixo eu posso colocar la um lent... e dizer que tanto caracters mude para proximo campo o curso, entende?

marvi · Setembro 21, 2008

Não conseguir ainda fazer a questão do display... estou tentando:

Tenho esse link que é o titulo:

<a href="#" onClick="mostraEsconde('exemplo<%=codigo%>');" style="text-decoration: none"><font color="#96BF19"><%=nome%></font></a>

Ele chama a função em java script:

<script language="JavaScript" type="text/javascript">
function mostraEsconde (qual) {
if (document.getElementById(qual).style.display == "none") {
  document.getElementById(qual).style.display= "";
}
else {
  document.getElementById(qual).style.display = "none";
}
}
</script>

Que por sua vez vai chamar a DIV que ele oculta e mostra:

<div id="exemplo<%=codigo%>" style="display: none;">

<a href="buscaemlinks.asp?pesquisa=<%=rsCategoria("COD_Categoria")&"|"&codigo%>" style="text-decoration: none"><font color="#AB9474">- <%=subnome%></font></a>

</div>

Onde rsCategoria("COD_Categoria") é o valor do meu sublink e o "&codigo é o valor do meu link "pai" correspondente... Se clico no link CELULAR ele abre o sublink Oi e CELULAR tem "&codigo e o OI tem rsCategoria("COD_Categoria") como valor.

Só que ao clicar no sublink Oi normalmente ele vai me levar para outra pagina com os produtos da Oi e sendo assim a posição que tava os links que era CELULAR com o sublink Oi aberto ficam todos fechados novamente... mas eu queria conservar eles aberto como estavam... Como se tivesse clicado em CELULAR para expandir o sublink Oi... Usei várias coisas e não saiu...

Veja os links rodando no sisteminha: www.ideiabiz.com/lojavirtual/index.asp Lá faça um teste, clique em celular e depois clique nas subcategorias e veja o que ele faz, ele fecha de novo!

Para ver a parte da página completa veja:

<% strSQL = "SELECT * FROM categoriaspai INNER JOIN Categorias ON categoriaspai.codigo = Categorias.id_pai order by codigo desc"
Set rsCategoria = Conexao.Execute(strSQL)%>


<body topmargin="0" leftmargin="0">

<script language="JavaScript" type="text/javascript">
function mostraEsconde (qual) {
if (document.getElementById(qual).style.display == "none") {
  document.getElementById(qual).style.display= "";
}
else {
  document.getElementById(qual).style.display = "none";
}
}
</script>

<%
conta = 0

While Not rsCategoria.EOF

codigo = rsCategoria("codigo")
nome = rsCategoria("Categoriaspai")
subnome = rsCategoria("Categoria")

conta = conta +1%>

<%

If conta = 1 Then
%>




<table id="AutoNumber5" style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="21" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
	<td width="100%" height="1"><img src="imagens/linhamenu1.jpg" border="0"></td>
  </tr>
  <tr>
	<td width="100%" height="1"><font face="Impact" color="#96BF19" size="5">
	<a href="#" onClick="mostraEsconde('exemplo<%=codigo%>');" style="text-decoration: none"><font color="#96BF19"><%=nome%></font></a></font></td>
  </tr>
</tr>
</table>
<div id="exemplo<%=codigo%>" style="display: none;">
<% 
End If%>

<table   style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="1" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr  >
	<td   width="100%" height="1"><img src="imagens/linhamenu1.jpg" border="0"></td>
  </tr>
	<td   width="100%" height="38"><font face="Impact" color="#ab9474" size="4">
	<a href="buscaemlinks.asp?pesquisa=<%=rsCategoria("COD_Categoria")%>" style="text-decoration: none"><font color="#AB9474">- <%=subnome%></font></a></font></td>
</tr>
</table>



<%rsCategoria.MoveNext
If Not rsCategoria.EOF Then
If rsCategoria("codigo") <> codigo Then%>
</div>
<%
conta = 0
End If
End If
Wend
%>

Public2004 · Setembro 21, 2008

Você pode incluir no link, o ID da DIV em questão, depois é só montar uma condição para verificar qua o ID passado e ocultar ou não a DIV.

Abs

marvi · Setembro 21, 2008

mas só tem uma div... e dentro dela da os loops para gerar os links e seus sublinks... se eu for pegar o ID da div vai acabar abrindo ou fechando todos os links e não só um link em questão, entende?

Public2004 · Setembro 21, 2008

Não entendi. De acordo com seu código é criado uma DIV para cada seção (categoria)...

<div id="exemplo<%=codigo%>" style="display: none;">

Ou estou errado?

Abs.

marvi · Setembro 21, 2008

Ha tá... É porque nas pressas aqui olhei o código antigo que não estava incrementado ainda com isso...

Mas veja o que fiz, se é que eu entendi:

Sublinks coloquei o ID da div

<a href="buscaemlinks.asp?pesquisa=<%=rsCategoria("COD_Categoria")&"|"&codigo%>" style="text-decoration: none"><font color="#AB9474">- <%=subnome%></font></a>

Esse "&codigo é o ID da DIV, ok?

Como ele chama a página buscaemlinks.asp, coloquei nela o split:

valor = split(Request.QueryString( "pesquisa"),"|")

varCategoria=valor(1)

Ok?

Assim cheguei nos menus / links categorias que normalmente vai ser exibido de novo na página buscaemlinks.asp que foi chamada (provavelmente seria fechado, pois iniciou tudo de novo, do zero) e coloquei:

<% if varCategoria <> "" then%>
<div id="exemplo<%=varCategoria%>" style="display:""">
<%else%>
<div id="exemplo<%=codigo%>" style="display: none;">
<% 
End If%>
<% 
End If%>

<table style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="1" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr >
<td width="100%" height="1"><img src="imagens/linhamenu1.jpg" border="0"></td>
</tr>
<td width="100%" height="38"><font face="Impact" color="#ab9474" size="4">
<a href="buscaemlinks.asp?pesquisa=<%=rsCategoria("COD_Categoria")&"|"&codigo%>" style="text-decoration: none"><font color="#AB9474">- <%=subnome%></font></a></font></td>
</tr>
</table>

O que acontece é que ele deixa todos abertos... Não deixa mais fechado como antes, mas acaba abrindo todos os links e não só o link especifico que cliquei antes para chamar a página, veja na prática: www.ideiabiz.com/lojavirtual/index.asp

Public2004 · Setembro 21, 2008

Vamos ver se assim fica mais claro...

Insira a variável "codigo" no link do produto, ex:

<a href="buscaemlinks.asp?pesquisa=<%=rsCategoria("COD_Categoria")%>&div_id=<% =codigo %>" style="text-decoration: none">

No início da página recupere esta variável, ex:

div_id = Request("div_id")

Depois efetue a condição na DIV, ex:

<% If div_id = codigo Then %>
<div id="exemplo<%=codigo%>" style="display: block;">
<% Else %>
<div id="exemplo<%=codigo%>" style="display: none;">
<% End If %>

Abs.

marvi · Setembro 21, 2008

Fiz, ele matem tudo fechado agora...

marvi · Setembro 21, 2008

Coloquei:

inicio: <%=response.write(codigo)%>

<% response.write(div_id)

Para ver os valores e quando você acessa o site ele mostra

2

1

Quando vocÊ clica ele mostra:

21

11

Entendeu? Acesse la e veja!

Acho que o problema está aí... pois ele ler o inicio de novo 1 e 2 e ler o valor que levamos... entende?

Public2004 · Setembro 21, 2008

Coloque o codigo por favor...

marvi · Setembro 21, 2008

Toda pagina do menu, ele é include de todas as paginas que ele é menu das paginas:

<% 
div_id = Request("div_id")%>


<body topmargin="0" leftmargin="0">

<script language="JavaScript" type="text/javascript">
function mostraEsconde (qual) {
if (document.getElementById(qual).style.display == "none") {
  document.getElementById(qual).style.display= "";
}
else {
  document.getElementById(qual).style.display = "none";
}
}
</script>

<%
conta = 0

While Not rsCategoria.EOF

codigo = rsCategoria("codigo")
nome = rsCategoria("Categoriaspai")
subnome = rsCategoria("Categoria")

conta = conta +1%>

<%

If conta = 1 Then
%>




<table id="AutoNumber5" style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="21" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
	<td width="100%" height="1"><img src="imagens/linhamenu1.jpg" border="0"></td>
  </tr>
  <tr>
	<td width="100%" height="1"><font face="Impact" color="#96BF19" size="5">
	<a href="#" onClick="mostraEsconde('exemplo<%=codigo%>');" style="text-decoration: none"><font color="#96BF19"><%=nome%></font></a></font></td>
  </tr>
</tr>
</table>
inicio: <%=response.write(codigo)%>
<% response.write(div_id)

If div_id = codigo Then %>
<div id="exemplo<%=codigo%>" style="display: """>
<% Else %>
<div id="exemplo<%=codigo%>" style="display: none;">
<% End If %>
<% 
End If%>

<table   style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="1" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr  >
	<td   width="100%" height="1"><img src="imagens/linhamenu1.jpg" border="0"></td>
  </tr>
	<td   width="100%" height="38"><font face="Impact" color="#ab9474" size="4">
  <a href="buscaemlinks.asp?pesquisa=<%=rsCategoria("COD_Categoria")%>&div_id=<% =codigo %>" style="text-decoration: none"><font color="#AB9474">- <%=subnome%></font></a></font></td>
</tr>
</table>



<%rsCategoria.MoveNext
If Not rsCategoria.EOF Then
If rsCategoria("codigo") <> codigo Then%>
</div>
<%
conta = 0
End If
End If
Wend
%>

Arquivado

mostrar e ocultar tabelas

Recommended Posts

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giancarlo Braga 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giancarlo Braga 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giancarlo Braga 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giancarlo Braga 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Public2004 79

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Public2004 79

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Public2004 79

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Public2004 79

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0