15 replies to this topic

[MastersRoX]

ae galera!

nao manjo nada de ajax... NADA mesmo.. meu negocio eh programação.. php!

queria saber se eh muito dificil fazer com q uma ceula de uma tabela fique visivel... e ao clicar em um botao ela suma e a outra celula tome o espaço dela!. como nessa imagem

Attached Files

•  ajax.gif   5.17KB   23 downloads

[matt.cavotta]

Se eu entendi bem o que você quer, dá pra fazer só com javascript.

Trabalha-se com a propriedade 'display' na célula que é alterada pelo 'botão'. Dá uma olhada no fórum de Javascript
que tem um tópico sobre isso.

[bimonti]

Um abraço pros manos do outro lado da muralha!!

<table width="200" border="1">
  <tr>
	<td>aaa</td>
	<td onclick="this.style.display='none';">bbb</td>
  </tr>
</table>

[MastersRoX]

uhhh... funciono... mas como fazer para aparecer novamente !??


meu amio fez um code p mim....

<a href="#" onclick="document.getElementById('a').style.display='block'; document.getElementById('b').style.display='block';">Mostrar tudo!!</a><br>
<a href="#" onclick="document.getElementById('a').style.display='block'; document.getElementById('b').style.display='none';">Mostrar A!!</a><br>
<a href="#" onclick="document.getElementById('a').style.display='none'; document.getElementById('b').style.display='block';">Mostrar B!!</a><br><br>


<table width="200" border="1">
<tr>
<td bgcolor="#0099CC" id='a'>aaa</td>
<td bgcolor="#00CC33" id='b'>bbb</td>
</tr>
</table>

ele mostra // mostra b// mas quando vai mostrar A e B dnovo .. as celulas nao voltam ao q eram antes... fica uma em baixo da outra! se alguem souber arrumar isso.. ja resolve !
vlw

Edição feita por: MastersRoX, 13/02/2007, 01:23.

[matt.cavotta]

Olá,
acho que você está exigindo muito dinamismo de uma pobre e estática tabela. Ficar sumindo com células pode zuar toda a tabela, pois não dá pra prever a configuração da mesma depois. Eu recomendo fortemente que nesse caso
você trabalhe com divs e css.

[MastersRoX]

entao cara!

oq eu quero.. eh UM SIMPLES BOTAO.. que ao clicar ele esconde a tabela... e quando clicar dnovo ele abre a tabela... e assim sucessivamente...!

mas nao manjo nada de java... pensei q poderia ser feiro em ajax.. so q falaram q da p fazer com javascrip!

alguem me da uma mão ???

[bimonti]

Realmente eu fiz aqui e a tabela vai ficando meio feia com o tempo, sei lá, tenta arurmar ae:

HTML

<table width="200" border="1">
	<tr>
		  <td>aaa</td>
		<td id="eu" style="display:none;">bbb</td>
	</tr>
</table>
<input type="button" value="Ação!" onclick="action();" />

JAVASCRIPT

<script>
function action(){
	var el = document.getElementById('eu');
	(el.style.display == 'none') ? el.style.display = 'block' : el.style.display = 'none';
}
</script>

[MastersRoX]

uhh,... fico 99% perfeito!

o unico "problema" eh q se vc ficar clicanado variassss vezes.. a tabela B vai ficando menor.....

teria como arrumar ?


vlw cara!

[matt.cavotta]

Finalmente consegui um jeito de arrumar isso. Vivendo e aprendendo!

<a href="#" onclick="document.getElementById('a').style.display='table-cell'; 
document.getElementById('b').style.display='table-cell';">Mostrar tudo!!</a><br>
<a href="#" onclick="document.getElementById('a').style.display='table-cell'; 
document.getElementById('b').style.display='none';">Mostrar A!!</a><br>
<a href="#" onclick="document.getElementById('a').style.display='none'; 
document.getElementById('b').style.display='table-cell';">Mostrar B!!</a><br><br>


<table width="200" border="1">
<tr>
<td bgcolor="#0099CC" id='a'>aaa</td>
<td bgcolor="#00CC33" id='b'>bbb</td>
</tr>
</table>

PS: Saco! No IE não funciona!

Em vez de block use table-cell

Edição feita por: matt.cavotta, 13/02/2007, 13:40.

[MastersRoX]

CARA.. .esse ficou perfeito !!!!


mas outro problema... nao funfa no IE... q eh o mais usado hj em dia... ai fodeu

ai tem outra saida ?

esse aki funciona no IE... mas no fire fox as celulas ficam errada!

<a href="#" onclick="document.getElementById('a').style.display='block'; document.getElementById('b').style.display='block';">Mostrar tudo!!</a><br>
<a href="#" onclick="document.getElementById('a').style.display='block'; document.getElementById('b').style.display='none';">Mostrar A!!</a><br>
<a href="#" onclick="document.getElementById('a').style.display='none'; document.getElementById('b').style.display='block';">Mostrar B!!</a><br><br>
<table width="200" border="1">
<tr>
<td bgcolor="#0099CC" id='a'>aaa</td>
<td bgcolor="#00CC33" id='b'>bbb</td>
</tr>
</table>


nao tem com fazer uma funcaoi.. q ve o navegador... e pra cada navegador aguente usa algo direfente ?

Edição feita por: MastersRoX, 13/02/2007, 13:47.

[matt.cavotta]

Esse código trata só o IE e FF:

<script>
function mostra(id){
  if(document.all)
	document.getElementById(id).style.display='block';
  else
	document.getElementById(id).style.display='table-cell'
}
function esconde(id){
  document.getElementById(id).style.display='none';
}
</script>

<a href="#" onclick="mostra('a'); mostra('b')">Mostrar tudo!!</a><br>
<a href="#" onclick="mostra('a'); esconde('b')">Mostrar tudo!!</a><br>
<a href="#" onclick="esconde('a'); mostra('b')">Mostrar tudo!!</a><br>


<table width="200" border="1">
<tr>
<td bgcolor="#0099CC" id='a'>aaa</td>
<td bgcolor="#00CC33" id='b'>bbb</td>
</tr>
</table>

[MastersRoX]

sim... esse ficou show!


mas nos outros navegadores... oq acontece? as 2 celulas aparecem ... mas nao da pra clicar neh !?

[matt.cavotta]

Aí eu não posso te informar, pois eu só tenho disponível aqui FF e IE6.0. Outros que valem ser testados é o Opera e
o Safari, se alguém aí puder testar pra gente ... .

mas nos outros navegadores... oq acontece? as 2 celulas aparecem ... mas nao da pra clicar neh !?

PS: mudando de ajax para javascript

[MastersRoX]

uma duvida... com esse code...quando a pag eh carregada a celula ta aberta...

tem como fazer com q quando a pag carregue ela esteja escondida ?

[matt.cavotta]

uma duvida... com esse code...quando a pag eh carregada a celula ta aberta...

tem como fazer com q quando a pag carregue ela esteja escondida ?

É só colocar na célula que você quer que não apareça:

style='diplay:none'