Ir para conteúdo
Fórum Script Brasil
  • 0

mostrar e ocultar tabelas

marvi

Perguntado por marvi,

 Share

Pergunta

marvi

marvi

Postado
Postado

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

Link para o comentário
Compartilhar em outros sites

17 respostass a esta questão

Posts Recomendados

  • 0
Rafael Spilki

Rafael Spilki

Postado
Postado

Marcelo, dessa forma que você fez... tipo ocutando a div só funcionará se você for ocultar a tabela inteira tipo:

<div id = teste>
<table>
...
</table>
</div>

então uma forma tosca de resolver isso seria criar uma tabela apenas para esse dado que você quer exclir... caso contrário acho que só em JS mesmo... mas não tenho certeza...

[]'s Rafael Spilki

Link para o comentário
Compartilhar em outros sites
  • 0
marvi

marvi

Postado
  • Autor
Postado (editado)

Diga Rafael...

Rapaz quase vai a sua dica... mas assim ela deixou o site todo torto e não exibi todas as subcategorias, só a primeira subcategoria de uma categoria... E a categoria de baixo acaba gerando a subcategoria de cima em vez de gerar dela própria... Como essas lojas fazem?

Editado por marvi
Link para o comentário
Compartilhar em outros sites
  • 0
marvi

marvi

Postado
  • Autor
Postado

Do seu jeito não foi... fiz assim mas ocultou tudo correto, mas na hora de clicar nos topicos não mostra o que está oculto... fica sem efeito:

<script language="javascript">
function HabCampos() {
  if (document.getElementById('periodo_sim').checked) {
    document.getElementById('campos').style.display = "";
document.getElementById('textfield').focus();
  }
  else {
    document.getElementById('campos').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="1" 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="38"><font face="Impact" color="#ab9474" size="5">
    <a  onClick="HabCampos()" id="periodo_sim" href="#" style="text-decoration: none"><font color="#A15625"><%=nome%></font></a></font></td>
  </tr>
</table>
<%
End If%>

<table id="campos" style="display:none" 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
conta = 0
End If
End If

Wend
%>

Veja um exemplo, acesse essa loja virtual store http://www.pjcomercio.com/seguranca.asp e clique em celulares na seção departamento a esquerda em vermelho, ele vai exibir tudo oculto referente a esse celular que vem do banco também...

Link para o comentário
Compartilhar em outros sites
  • 0
jothaz

jothaz

Postado
Postado

Faça este teste por favor:

function HabCampos() {
  if (document.getElementById('periodo_sim').checked) {
    document.getElementById('campos').style.display = "''";
document.getElementById('textfield').focus();
  }
  else {
    document.getElementById('campos').style.display = "'none'";
  }


<table id="campos" style="display:'none'" style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="1"

Coloque o s '' e veja se vai.

Link para o comentário
Compartilhar em outros sites
  • 0
marvi

marvi

Postado
  • Autor
Postado

Pessoal fiz assim e quase acerto...

Veja:

Tem

CELULAR

- oi

- tim

INFORMATICA

- acessorio

Mas ai se clico em celular ele apaga e aparece quando quero as subcategorias (oi, tim...), mas ele acaba sumindo também a seção INFORMATICA e acessorio também e é só para sumir oi, tim... E também quando clico em informática some tudo... em vez de só acessorio, entenderam?

<script> function Oculta(cxa){ 
if (document.getElementById(cxa).style.display=='none'){
document.getElementById(cxa).style.display='block';         }
else{         
document.getElementById(cxa).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="1" 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="38"><font face="Impact" color="#ab9474" size="5">
    <a href="java script:Oculta('primeiro');" style="text-decoration: none"><font color="#A15625"><%=nome%></font></a></font></td>
  </tr>
</table>
<div style="display:block" id="primeiro">
<%
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
conta = 0
End If
End If

Wend
%>
</div>

Certo Jothaz, nem vi seu post na hora... vou fazer

Tentei, deu erro na página no script, linha 181... mas sabe que esses erros de script não mostra extamente o lugar...

Link para o comentário
Compartilhar em outros sites
  • 0
marvi

marvi

Postado
  • Autor
Postado

COloquei esse codigo

<script>
function mostraEsconde(id){
var obj = document.getElementById(id);
if(obj.style.display == "none"){
obj.style.display = "";
}else{
obj.style.display = "none";
}
}
</script>

<table id="teste" style="display:"""

E ele oculta e mostra... mas não oculta todo... se tem

CELULAR

- OI

- CLARO

e mando ocultar clicando no CELULAR ele fica:

CELULAR

- CLARO

Só some OI... entende?

Link para o comentário
Compartilhar em outros sites
  • 0
Rafael Spilki

Rafael Spilki

Postado
Postado

É Marcelo, como eu disse, isso é JavaScript... o local não é o adequado... acredito que você já teria conseguido sua resposta postando no local adequado...

Meus conhecimentos de JS são meio curtos...

Acho que o ideal seria você reposrtar esse tópico solicitando ao moderador que mova o mesmo para a sala de JS, ok?

[]'s Rafael Spilki

Link para o comentário
Compartilhar em outros sites
  • 0
marvi

marvi

Postado
  • Autor
Postado

Pessoal, boa tarde

Estou tentando fazer que mostre um link e seus sublinks:

Ex.:

CELULAR

- OI

- TIM

- CLARO

INFORMÁTICA

- Acessórios

E assim vai... isso conseguir fazer. Mas, o que quero é que no titulo CELULAR os subtítulos OI, TIM e CLARO fiquem ocultos até quando alguém clicar em CELULAR e ele expandir as subcategorias ou subtítulos... Tentando vários métodos fiz o seguinte, exemplo:

o meu SQL:

<% strSQL = "SELECT * FROM categoriaspai INNER JOIN Categorias ON categoriaspai.codigo = Categorias.id_pai order by codigo desc"
Set rsCategoria = Conexao.Execute(strSQL)%>
Coloquei um script que ao clicar em CELULAR ou INFORMÁTICA ele faz ocultar ou mostrar as subcategorias: 
<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>
Agora vem o restante que da LOOP dando esse efeito, tipo: CELULAR - OI - TIM Vejam: 
<%
conta = 0

While Not rsCategoria.EOF

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

conta = conta +1%>
<%
If conta = 1 Then
%>
Nessa parte abaixo mostrará os títulos, exemplo: CELULAR: 
<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>

<% 
End If %>
Essa parte mostra os subtítulos ou subcategorias de CELULAR: 
<div align="left" id="exemplo<%=codigo%>" style="display: none;">
<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>
</div> 


<%rsCategoria.MoveNext

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

Mas até aí tudo bem, o problema é que quando clico em CELULAR ele só exibi o subtítulo chamado - OI ou CLARO, mas não exibi todos os subtítulos chamado: - OI, - TIM, - CLARO e etc.

Como faço para que mostre todo subtítulos de cada titulo? Pois se tiro esse script de ocultar ele mostra todos os subtítulos correspondente de cada titulo, mas a exibição fica fixa e quando coloco o javascript para ocultar e mostrar, ele acaba ocultando sim, mas na hora de mostrar só mostra um subtítulo...

Como resolver isso??

Muito obrigado!

Marcelo

Link para o comentário
Compartilhar em outros sites
  • 0
marvi

marvi

Postado
  • Autor
Postado

Pessoal 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?

Alguém sabe?

Obrigado!

Link para o comentário
Compartilhar em outros sites
  • 0
marvi

marvi

Postado
  • Autor
Postado

Fer Cos Mig,

Como colocar os dois dentro da mesma DIV? As opções amplia e mostrar os seus subtitulos normalmente... Mas o que quero é que matenha essas subtitulos abertas mesmo que eu mude para outra página.

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?

Obrigado!

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,6k
×
×
  • Criar Novo...