Exibição de dados sem refresh

Assuntos Gerais
#1

Pessoal,

Alguém aí já fez alguma coisa desse tipo:

Eu tenho uma tabela html, com várias linhas (<tr>), e algumas dessas linhas eu não quero q sejam exibidas, quero q fiquem ocultas, e só sejam exibidas qdo o usuário clicar em botão.

Eu fiz uns testes usando css, a propriedade visibility, mas não deu mto certo pq ele oculta somente os dados, mas o espaço q esta linha ocupa continua…

se alguém tiver algum exemplo, eu agradeço…

valew

#2

:idea:
pesquise sobre a tag ‘DIV’. acho q com ela vc vai poder fazer o q quer.

ela funciona mais ou menos assim:

<div id="tabela"> codigo html </div>

ai vc pode modificar todo o codigo HTML q esta entre as tags DIV através do JavaScript.

no InternetExplorer:

tabela.innerHTML = "outro codigo html";

ou no nerscape:

document.getElementbyId("tabela").innerHTML = "outro codigo html";

:wink:

obs: tirei esses codigos da minha cabeça agora, posso ter trocado uma ou outra letra. mas a ideia eh essa :roll:

#3

Pode Ser em javaScript?
eu tenho um negocim que fiz em um outro site interessante se quiser.

Em jascprit seria assim a função:

function WM_toggle(id){
  if (document.all){
    if(document.all[id].style.display == 'none'){
      document.all[id].style.display = '';
    } else {
      document.all[id].style.display = 'none';
    }
  } else if (document.getElementById){
    if(document.getElementById(id).style.display == 'none'){
      document.getElementById(id).style.display = 'block';
    } else {
      document.getElementById(id).style.display = 'none';
    }
  }
}

A qual vc passaria como parametro o numero da linha (ID)

você chamaria ela desta maneira dentro do seu “html”

 javascript:;" onclick="WM_toggle('div1');" Link ou butão a ser clicado para abrir o restante

Ficou claro? Eliminei as tag’s HTML pois o php nuke não aceita.

#4

Pode Ser em javaScript?
eu tenho um negocim que fiz em um outro site interessante se quiser.

Em jascprit seria assim a função:

function WM_toggle(id){
  if (document.all){
    if(document.all[id].style.display == 'none'){
      document.all[id].style.display = '';
    } else {
      document.all[id].style.display = 'none';
    }
  } else if (document.getElementById){
    if(document.getElementById(id).style.display == 'none'){
      document.getElementById(id).style.display = 'block';
    } else {
      document.getElementById(id).style.display = 'none';
    }
  }
}

A qual vc passaria como parametro o numero da linha (ID)

você chamaria ela desta maneira dentro do seu “html”

 javascript:;" onclick="WM_toggle('div1');" Link ou butão a ser clicado para abrir o restante

Ficou claro? Eliminei as tag’s HTML pois o php nuke não aceita.

#5

isso mesmo…

mas em vez de utilizar o style, vc podeira utilizar o ‘innerHTML’

#6

é vivendo e aprendendo, só a titulo de curiosidade então, qual seria basicamente a diferença entre style e innerHtml?

#7

seguinte…

com o innerHTML voce define o código HTML q vai estar dentro de uma tag div (pode utilizar a tag ‘span’ tambem q da no mesmo).

por exemplo:

digamos q tenha esse trecho na página HTML.

[code]…

Segundo turno sera dia 31
......[/code]

o resultado será:

Segundo turno sera dia 31

ai se vc quizer trocar a noticia utilziando o seguinte codigo javascript:

para IE : noticia.innerHTML = “Segundo turno dia 31”;
para Netscape: document.getElementById(“noticia”).innerHTML = “Segundo turno dia 31”;

ai aquele trecho da página vai mudar para

Segundo turno dia 31

ou seja o ‘innerHTML’ provoca um efeito semelhante a como se o código HTML da página tivese sido trocado para:

[code]…

Segundo turno dia 31
......[/code]

deu pra entender? :roll:
senão eh so falar…
:wink:

#8

pessoal,
obrigado pelas valiosas dicas, acabei fazendo desta forma:

todas as linhas q eu quero ocultar/exibir, eu coloquei como um mesmo id:

tr id="ocultar" style="display:none" align='left' valign='middle' bgcolor='#C6E2FF'

e no js:

[code]function show(metodo){
var elems = document.getElementsByName(‘ocultar’);
for ( i = 0; i < elems.length; i++ ){
if ( metodo == “ocultar” ){
elems[i].style.display = ‘none’;
}else{
elems[i].style.display = ‘block’;
}

}

}[/code]

valew pessoal,

#9