Nós, pais e filhos

[FabianoSouza 5]

Quero saber se o lance de Node, Child e afins se aplica a outros elemetos HTML ou se são específicos para DIV, UL, LI.

 

Pergunto isso porque não consigo recuperar o id de algo que esteja dentro de um tag TD, por exemplo.

 

Sempre achei que com node e child eu poderia pegar qualquer elemento acima ou abaixo na hierarquia da página.

Tenho este situação

 

<td>
<div id="<%=rs(cod_cliente)%>">conteudo da div</div>

</td>

Quero pegar o ID da DIV com a seguinte lógica. "Pegue o ID do elemento filho".

 

 

 

Brigado.

[William Bruno 1501]

se aplicam a todos sim.

 

como você tentou ?

[FabianoSouza 5]

se aplicam a todos sim.

 

como você tentou ?

 

 

Mais ou menos isso.

meu_elemento.id=element.childNode.id

[William Bruno 1501]

não faz sentido você duplicar o atributo ID num documento, ai dará problema mesmo.

 

Qual o seu objetivo ?

[FabianoSouza 5]

não faz sentido você duplicar o atributo ID num documento, ai dará problema mesmo.

 

Qual o seu objetivo ?

 

O objetivo é clicar sobre uma TD para que seja iniciado um processo com AJAX. Esta ação deverá abrir uma DIV que está dentro da TD. Esta dive me trará alguns dados do registro em questão.

Estrutura:

 

<td id=<%=rs("id_cliente")%>
<div></div>
</td>

 

A parte do AJAX verei depois...por hora só preciso que ao clicar na TD seja aberta uma DIV na respectiva linha da tabela.

Entendo que a DIV seja o elemento filho que precisa aparecer quando for clicado na TD.

[William Bruno 1501]

ok, e para isso você não precisa do ID.

 

Basta fazer:

 

td.getElementsByTagName('div')[0].style.display = 'block';

[FabianoSouza 5]

ok, e para isso você não precisa do ID.

 

Basta fazer:

 

td.getElementsByTagName('div')[0].style.display = 'block';

 

Fiz assim:

 

No javascript:

 

 function detalhes_td()
{
td.getElementsByTagName('div')[0].style.display = 'block';
}

 

 

 

No HTML

 

 <td onclick="detalhes_td()">
<%=resumo(rs("CadPessoalNome"), 30) %>
 <div style="display:none; height:15px; width:50px;">sdads</div>
</td>

 

Ou seja, a DIV é oculta nauralmente, deve aparecer com o click.

 

Não funfou. Onde estou errando?Ah... a linha em questão está dentro de um loop de recordset....será q é por isso?

[William Bruno 1501]

faltou uma referência ao objeto td

 

 

  <td onclick="detalhes_td( this )">

e ai :

 

  function detalhes_td( td )

 

O console de erros vai te ajudar a desenvolver js. Aperte Ctrl+Shift+J no Firefox.

Leia:

http://wbruno.com.br/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

[FabianoSouza 5]

Nossa...continua não funfando. Mas estou desconfiado que estou com problemas no PC...muitos códigos (JS) que os colegas do fórum postam não estão rodando. Alguns juram de pé junto que o código funfa...mas aqui não vai de jeito nenhum.

 

Vou formatar minha máquina e dar uma olhada no link.

 

Muito obrigado!

[FabianoSouza 5]

Opa! Agora funcionou. Dei uma limpada no PC...parece que algo não estava muito bem.

 

Bom, agora a DIV aparece na respectiva linha e trás o ID também.

 

  function detalhes_td(td, id)
{
//td.getElementsByTagName("div")[0].style.display = "inline";
var valor = document.getElementById(id).id;

   if( td.getElementsByTagName("div")[0].style.display=='inline' ){
       td.getElementsByTagName("div")[0].style.display = "none";
   }
   else{
       td.getElementsByTagName("div")[0].style.display = "inline";
   }

//var valor = document.getElementById(id).id;
//alert(valor);
}

 

Agora estou tentando colocar um If para exibir/ocultar a DIV. Está funcioando parcialmente. Pois mantem aberta as DIV se eu clicar em outras linhas.

Preciso que antes de exibir uma DIV seja verificado se há outra aberta, caso afirmativo deve fechar antes de abrir outra.

Se puder dar uma luz para criar este comportamento vai me quebrar um super galho!

 

Mais uma vez obrigado.

 

 

 

 

 

 

[Vadio 13]

para varios nós com eventos incomuns utilize class

 

getElementByClassName

[FabianoSouza 5]

para varios nós com eventos incomuns utilize class

 

getElementByClassName

 

 

Opa. Obrigado pela dica. Estou tentando usá-la.

 function detalhes_td(td, id)
{
//td.getElementsByTagName("div")[0].style.display = "inline";
var parametro = document.getElementById(id).id;

   if( td.getElementsByTagName("div")[0].style.display=='inline' ){
       td.getElementsByClassName("detalhe_td").style.display = "none";
   }
   else{
       td.getElementsByTagName("div")[0].style.display = "inline";
   }
 var url=document.getElementById(parametro).getAttribute("origem");
 var origem_dados=url+"?id="+id;

//alert(origem_dados);
}

Veja a linha

 td.getElementsByClassName("detalhe_td").style.display = "none";

Mas não está funcionando. Creio que seja porque a função se aplica ao item clicado. Sendo assim, se já houver uma div exibida (de outra TD clicada) a função não saberá e não fechará a DIV.

 

Também tentei

  document.body.getElementsByClassName("detalhe_td").style.display="none";

 

Preciso que ao clicar na TD a função "procure" na página um elemento com a classe de CSS chamada detalhe_td. E então sim aplicar o style.display="none."

 

Foi essa a lógica que cheguei..

[William Bruno 1501]

ficaria mais ou menos assim:

 

 

  function detalhes_td(td, id)
{
   var div = td.getElementsByTagName("div")[0];


    document.getElementsByClassName("detalhe_td").style.display = "none";

   if( div.style.display=='inline' ){
       div.style.display='none';
   }
   else{
       div.style.display='inline';
   }


//..

}

entendeu ? escondo todas, e depois mostro a sua.

[FabianoSouza 5]

ficaria mais ou menos assim:

 

 

  function detalhes_td(td, id)
{
   var div = td.getElementsByTagName("div")[0];


    document.getElementsByClassName("detalhe_td").style.display = "none";

   if( div.style.display=='inline' ){
       div.style.display='none';
   }
   else{
       div.style.display='inline';
   }


//..

}

entendeu ? escondo todas, e depois mostro a sua.

 

 

Olá William. Entendi sim a lógica. havia feito algumas tentativas neste caminho antes de postar.

 

Mas estou com problemas justamente na primeira ação que é esconder as DIV com a classe CSS detalhe_td.

Esta linha não vai

document.getElementsByClassName("detalhe_td").style.display = "none";

 

Até fiz um teste: deixei as DIVs naturalmente visiveis (pelo CSS) . Pela lógica todas as div deveriam sumir, certo? Mas isso não funfa. Já verifiquei o nome da classe. Está idêntico ao do CSS.

 

Estou investigando aqui para tentar fazer esta lógica funcionar...

[FabianoSouza 5]

Olá William. Entendi sim a lógica. havia feito algumas tentativas neste caminho antes de postar.

 

Mas estou com problemas justamente na primeira ação que é esconder as DIV com a classe CSS detalhe_td.

Esta linha não vai

document.getElementsByClassName("detalhe_td").style.display = "none";

 

Até fiz um teste: deixei as DIVs naturalmente visiveis (pelo CSS) . Pela lógica todas as div deveriam sumir, certo? Mas isso não funfa. Já verifiquei o nome da classe. Está idêntico ao do CSS.

 

Estou investigando aqui para tentar fazer esta lógica funcionar...

 

Bom, fiz mais um teste bem simples rodando somente a linha

document.getElementsByClassName("classe_teste")[0].style.display = "none";

Deixei a div como "inline" no CSS.

 

O compotamento foi o seguinte. Ao clicar na TD (que fica dentro de um loop e por isso exibe várias vezes a DIV) apenas uma

das tantas DIVs desaparece.

Achei que todas fossem desaparecer porque usam a mesma classe. Não é?

 

 

Alguma sugestão para que todas desapareçam?

[William Bruno 1501]

ops.. falha minha.

 

Cara, você precisa fazer um loop pelo array retornado por esse método.

Escondendo uma por uma.. desculpe. esqueci disso. =)

[Vadio 13]

var detalhe_td = document.getElementsByClassName("detalhe_td");
for(i in detalhe_td) detalhe_td[i].style.display = 'none';

[FabianoSouza 5]

var detalhe_td = document.getElementsByClassName("detalhe_td");
for(i in detalhe_td) detalhe_td[i].style.display = 'none';

 

 

Boa tarde Eric. Parece que a class não está sendo reconhecida.

 

Fiz o seguinte teste à parte para me certificar quanto ao funcionamento do getElementsByClassName.

Se eu estiver certo, deveria exibir o ID ("maria") da DIV que pego via nome da classe. Certo?

 

  
var tag = document.getElementsByClassName("teste");
var id_tag=tag.id;  
alert(id_tag)

 

E minha div de testes é esta.

 

<div  onclick="pega_id()" class="teste" id="maria">minha div de testes</div> 

 

O alert retorna "undefined", embora a classe exista (está inline na página). É a mesma coisa que acontece com a linha abaixo (do script que estamos falando).

 

var detalhe_td = document.getElementsByClassName("detalhe_td")

 

Pela lógica, se não conseguir capturar o nome da classe o loop não vai funcionar, né (que é o que está acontencendo)?

Então primeiro preciso conseguir recuperar esta informação...

 

 

Obrigado.

[Vadio 13]

http://jsfiddle.net/eric_freitas/WdpJA/

[FabianoSouza 5]

http://jsfiddle.net/..._freitas/WdpJA/

 

Hmm..fiz vários testes e parece que não funciona pelo fato da DIV que quero esconder ter seu ID é dinâmico, vem um recordset.

 

Creio que ainda assim deveria funcionar pois a ClassName é a mesma, apenas o ID de cada uma é que munda (vem do banco de dados).

 

Agora preciso ver como contornar isso...