Ir para conteúdo

POWERED BY:

Arquivado

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

rd111072

[Resolvido] Script para mostrar/esconder tabela

Por , em Javascript

Recommended Posts

rd111072    1

rd111072
Postado

Alguém conhece algum script para mostrar/esconder tabelas, nas quais tem outros inputs de um formulário?

 

A ativação das tabelas e respectivos campos embutidos seria através da marcação de radios, tipo sim/não.

 

Procurei no laboratório de scripts e não achei nada igual!

 

Alguém sabe?

Compartilhar este post

Link para o post
Compartilhar em outros sites

JuniorCampos    0

JuniorCampos
Postado

Meu camarada ... Aqui vai o cod para isso:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:::Fade:::</title>
<script type="text/javascript">
function fadeOut(id, time) {
	target = document.getElementById(id);
	alpha = 100;
	timer = (time*100)/50;
	var i = setInterval(
			function() {
				if (alpha <= 0)
					clearInterval(i);
				setAlpha(target, alpha);
				alpha -= 2;
			}, timer);
}

function fadeIn(id, time) {
	target = document.getElementById(id);
	alpha = 0;
	timer = (time*100)/50;
	var i = setInterval(
			function() {
				if (alpha >= 100)
					clearInterval(i);
				setAlpha(target, alpha);
				alpha += 2;
			}, timer);
}

function setAlpha(target, alpha) {
	target.style.filter = "alpha(opacity="+ alpha +")";
	target.style.opacity = alpha/100;
}

</script>
<style type="text/css">
#exemplo {
	top: 50%;
	left: 50%;
	margin: -150px 0px 0px -200px;
	width: 400px;
	height: 300px;
	position: absolute;
}

#exemplo a {
	font: 11px Verdana, Arial, Sans-serif;
	color: #27373F;
	text-decoration: none;
}

#exemplo #alvo {
	width: 400px;
	height: 200px;
	background: #27373F;
	color:#FF9900;
}
</style>
</head>
<body>
	<div id="exemplo" align="center">
		<a href="java script:fadeOut('alvo', 0.1)">Faz sumir</a> | 
		<a href="java script:fadeIn('alvo', 0.1)">Faz aparecer</a>
		<div id="alvo">
			<!--aqui vai o conteudo-->
			Olah, eu sou seu conteudo!
		</div>
	</div>
</body>
</html>
qualquer coisa posta de novo amigo

Compartilhar este post

Link para o post
Compartilhar em outros sites

rd111072    1

rd111072
Postado

Bom,

 

coloquei o código acima no meu form, tentando adaptá-lo para radio e table... mas não funcionou.

 

primeiro: a table não fica inicialmente oculta, como deveria ficar.

 

segundo: o radio que faz o fadeOut só funciona depois que eu clico no que faz o fadeIn.

 

terceiro: quando clico em qualquer outro radio do form (mesmo que não tenha a função), ele ativa o fadeIn da table.

 

 

os radios estão assim:

 

  <input name="assoc" type="radio" class="RADIO" onChange="java script:fadeIn('TASSOC', 0.1);" value="sim">
											Sim  
											<input name="assoc" type="radio" class="RADIO" onChange="java script:fadeOut('TASSOC', 0.1);" value="não">

e a table é essa:

 

<table width="100%"  border="1" cellpadding="0" cellspacing="0" bordercolor="#C9D8FC" class="caixa_borda" id="TASSOC">
											<tr>
											  <td><table width="100%" border="0" cellpadding="2" cellspacing="2" bordercolor="#9900CC">
												  <tr>
													<td width="66%" class="submenu" ><p>Matrícula:</p></td>
													<td width="34%" class="submenu" ><input name="matricula" type="text" class="combos" size="7" maxlength="7"></td>
												  </tr>
											  </table></td>
											</tr>
										</table>

Compartilhar este post

Link para o post
Compartilhar em outros sites

klaygomes    0

klaygomes
Postado

primeiro: a table não fica inicialmente oculta, como deveria ficar.

Claro, você deveria ter definido isto no style da tabela

 

segundo: o radio que faz o fadeOut só funciona depois que eu clico no que faz o fadeIn.

Claro, cadê o style opacity (ou o filter alpha) na declaração da tabela?

 

terceiro: quando clico em qualquer outro radio do form (mesmo que não tenha a função), ele ativa o fadeIn da table.

Você deveria ter usado o evento onclick ao invés do onchange.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rd111072    1

rd111072
Postado

klay,

 

modifiquei e não funcionou.

 

ficou assim:

 

radios

 

<input name="assoc" type="radio" class="RADIO" onClick="java script:fadeIn('TASSOC', 0.1);" value="sim">
											Sim  
											<input name="assoc" type="radio" class="RADIO" onClick="java script:fadeOut('TASSOC', 0.1);" value="não">

E table

 

<table width="100%"  border="1" cellpadding="0" cellspacing="0" bordercolor="#C9D8FC" id="TASSOC" style="opacity:0%; visibility:hidden">
											<tr>
											  
													<td width="66%">Matrícula:</td>
													<td width="34%"><input name="matricula" type="text" class="combos" size="7" maxlength="7"></td>
												  </tr>
											  </table>

Compartilhar este post

Link para o post
Compartilhar em outros sites

klaygomes    0

klaygomes
Postado

Troque:

style="opacity:0%; visibility:hidden">

Por:

 

style="opacity: 0;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);zoom:1">

E :

 

onClick="java script:fadeIn('TASSOC', 0.1);"

Para:

 

onClick="fadeIn('TASSOC', 1);"
(o mesmo para o fadeOut)

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