Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

André Baptista

sou leigo..

Por , em Javascript

Recommended Posts

André Baptista    0

André Baptista
Postado

Ae galera beleza?

Sou muito leigo em Java Script,

catei um codigo interessante na net só que queria modificalo um pouco..

<table width="98%" border="0" cellspacing="0" cellpadding="0">
  <tr onmouseover="java script:this.style.background='#FFFFFF';" onmouseout="java script:this.style.background='#66CC33';" bgcolor="#66CC33" onclick="java script:if(linha1.style.display=='block') linha1.style.display='none'; else linha1.style.display='block';" style="cursor:hand" alt="+ Detalhes">
	<td><strong>Texto 01 </strong></td>
  </tr>
  <tr style="display:none"  id="linha1">
	<td>texto aqui texto aqui texto aqui texto aqui texto aqui<br/>
	texto aqui texto aqui texto aqui texto aqui texto aqui<br/>
	texto aqui texto aqui texto aqui texto aqui texto aqui<br/>
	texto aqui texto aqui texto aqui texto aqui texto aqui<br/>
	</td>
  </tr>
  <tr onmouseover="java script:this.style.background='#FFFFFF';" onmouseout="java script:this.style.background='#66CC33';" bgcolor="#66CC33" onclick="java script:if(linha2.style.display=='block') linha2.style.display='none'; else linha2.style.display='block';" style="cursor:hand" alt="+ Detalhes">
	<td><strong>Texto 02</strong></td>
  </tr>
  <tr style="display:none"  id="linha2">
	<td>texto aqui texto aqui texto aqui texto aqui texto aqui<br/>
	texto aqui texto aqui texto aqui texto aqui texto aqui<br/>
	texto aqui texto aqui texto aqui texto aqui texto aqui<br/>
	texto aqui texto aqui texto aqui texto aqui texto aqui<br/>
	</td>
  </tr>
</table>

ai o que eu gostaria de alterar seria o seguinte:

- No momento em que eu clico no Texto 01 o mesmo abre.

- Ai quando clicar no Texto 02, gostaria que o Texto 01 "fosse escondido" novamente.

 

teria como fazer isto?

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Melhorei só um pouquinho o código... tem como com parâmetros fazer ficar só uma função...

<script>
function mostra1(){
	if(linha2.style.display=='block')
		linha2.style.display='none'; 
	if(linha1.style.display=='block') 
		linha1.style.display='none'; 
	else 
		linha1.style.display='block';
}
function mostra2(){
	if(linha1.style.display=='block')
		linha1.style.display='none'; 
	if(linha2.style.display=='block') 
		linha2.style.display='none'; 
	else 
		linha2.style.display='block';
}
</script>
</head>
<body>
<table width="98%" border="0" cellspacing="0" cellpadding="0">
  <tr onmouseover="java script:this.style.background='#FFFFFF';" onmouseout="java script:this.style.background='#66CC33';" bgcolor="#66CC33" onclick="mostra1()" style="cursor:hand" alt="+ Detalhes">
	<td><strong>Texto 01 </strong></td>
  </tr>
  <tr style="display:none"  id="linha1">
	<td>texto aqui texto aqui texto aqui texto aqui texto aqui<br/>
	texto aqui texto aqui texto aqui texto aqui texto aqui1<br/>
	texto aqui texto aqui texto aqui texto aqui texto aqui1<br/>
	texto aqui texto aqui texto aqui texto aqui texto aqui1<br/>
	</td>
  </tr>
  <tr onmouseover="java script:this.style.background='#FFFFFF';" onmouseout="java script:this.style.background='#66CC33';" bgcolor="#66CC33" onclick="mostra2()" style="cursor:hand" alt="+ Detalhes">
	<td><strong>Texto 02</strong></td>
  </tr>
  <tr style="display:none"  id="linha2">
	<td>texto aqui texto aqui texto aqui texto aqui texto aqui<br/>
	texto aqui texto aqui texto aqui texto aqui texto aqui2<br/>
	texto aqui texto aqui texto aqui texto aqui texto aqui2<br/>
	texto aqui texto aqui texto aqui texto aqui texto aqui2<br/>
	</td>
dá uma tentada ai... não é tão complicado ^^

sabendo programar em alguma linguagem, as outras apresentam algumas coisas lógicas semelhantes.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Baptista    0

André Baptista
Postado

beleza!

 

mas só uma duvida, se eu adicionar outros "campos"

eu teria que criar uma função mostra3()

 

a function mostra3 ficaria assim:

function mostra3(){
	if(linha3.style.display=='block')
		linha3.style.display='none';
	if(linha2.style.display=='block')
		linha2.style.display='none';
	if(linha1.style.display=='block')
		linha1.style.display='none';
	else
		linha3.style.display='block';
}
e automaticamente preciso mexer nas demais?

 

valeu a atenção!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

sim, é por ai...

tem como melhorar isso... mas antigamente tb era assim... tudo manualmente..

eu só transformei em funções o JS que tava interno....

 

dê uma procurada por laços de repetição, e condicionais, como if, else..

tem como melhorar isso ai...

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Baptista    0

André Baptista
Postado

beleza podes deixar que vou procurar..

 

mas eu tenho uma noção da logica de programação, é na verdade eu nao sabia o que o "display" e "none" sao responsaveis por mostrar/esconder o coluna..

 

mas eu estive testando esse codigo aqui..

funcionou uma beleza no Firefox

mas no Internet Explorer ele acusa um erro +/- assim

 

dizendo que a "linha1" não esta definida

 

 

abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Ficou melhor agora... Tableless, e seguindo o padrão JS do w3c...

Uma só função para qntas linhas você quiser... hehe

<script>
function mostra(atual){
	if(document.getElementById('linha'+atual).style.display=='block') {
		document.getElementById('linha'+atual).style.display='none';
	var max = 4; // numero de linhas que você quer mostrar/escondervar 
	i=1;
	while(i<=max){
		document.getElementById('linha'+i).style.display='none';
		i++;
	}		
	}
	else {
	var max = 4; // numero de linhas que você quer mostrar/escondervar 
	i=1;
	while(i<=max){
		document.getElementById('linha'+i).style.display='none';
		i++;
		}		
	document.getElementById('linha'+atual).style.display='block'; 
	}

}
</script>
<style>
span.caixa {display: block;background-color: #66CC33;cursor:pointer;font-weight:bold;}
span.caixa:hover {background-color: #fff;}
#linha1, #linha2, #linha3, #linha4 {
	display:none;
}
</style>
</head>
<body>
<span class="caixa" onclick="mostra(1)" alt="+ Detalhes">Texto 01</span>
<span id="linha1">
texto aqui texto aqui texto aqui texto aqui texto aqui1<br/>
texto aqui texto aqui texto aqui texto aqui texto aqui1<br/>
texto aqui texto aqui texto aqui texto aqui texto aqui1<br/>
texto aqui texto aqui texto aqui texto aqui texto aqui1<br/>
</span>

<span class="caixa" onclick="mostra(2)" alt="+ Detalhes">Texto 02</span>
<span id="linha2">
texto aqui texto aqui texto aqui texto aqui texto aqui2<br/>
texto aqui texto aqui texto aqui texto aqui texto aqui2<br/>
texto aqui texto aqui texto aqui texto aqui texto aqui2<br/>
texto aqui texto aqui texto aqui texto aqui texto aqui2<br/>
</span>

<span class="caixa" onclick="mostra(3)" alt="+ Detalhes">Texto 03</span>
<span id="linha3">
texto aqui texto aqui texto aqui texto aqui texto aqui3<br/>
texto aqui texto aqui texto aqui texto aqui texto aqui3<br/>
texto aqui texto aqui texto aqui texto aqui texto aqui3<br/>
texto aqui texto aqui texto aqui texto aqui texto aqui3<br/>
</span>

<span class="caixa" onclick="mostra(4)" alt="+ Detalhes">Texto 04</span>
<span id="linha4">
texto aqui texto aqui texto aqui texto aqui texto aqui4<br/>
texto aqui texto aqui texto aqui texto aqui texto aqui4<br/>
texto aqui texto aqui texto aqui texto aqui texto aqui4<br/>
texto aqui texto aqui texto aqui texto aqui texto aqui4<br/>
</span>
Weeeeeeeeeeeeeeeeeee ^^ Testei IE6, IE7 e FF3.. tá perfeitinho... vê ai cara...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito