[RESPONDIDO] Esconder/Mostrar linha de tabela html em javascript

Front-end
#1

Boa tarde pessoal.

Quero ocultar/mostrar linhas em uma tabela HTML com javascript, porém quando “oculto” essa linha, o espaço continua sendo ocupado.
Segue imagens para facilitar o entendimento.

Imagem de quando a pagina é carregada, com parâmetro “hidden” na linha da tabela

Imagem de quando clico na linha, e linha “oculta” é mostrada.

Códigos relevantes:

  1. Função JS que mostra/esconde a linha

[code][/code]

Linha que quando é clicada mostra/esconde linha de baixo

<tr class="odd" onClick="escondeMostra(<? echo $i.'00'; ?>)"> <td width="30"><label for="data"><? echo $i; ?>:00 </label></td> <td width="350" align="left"><label for="paciente" ><b><? echo trim($array['NOME']); ?><b></label></td> <td class="acao"><label for="acao"> <? if ($date >= date("d/m/y")) { ?> <a href="#"><img src="imagens/rem.png" width="8" height="8" alt="Remover"></a> <? } ?></label></td>

Linha que quero mostrar/esconder

               <tr id='<? echo $i.'00'; ?>'  style="visibility:hidden" onClick="escondeMostra(<? echo $i.'30'; ?>)">
              	<td colspan="4" onClick="escondeMostra(<? echo $i.'00'; ?>)"><label for="extra">Mais informacoes:  
					<? if ($array['OBSERVACAO']) { echo $array['OBSERVACAO']; } else { echo 'Nenhuma'; } ?>
                </label></td>
                </tr>

Alguém tem ideia oque posso fazer para conseguir mostrar/esconder essa linha, sem manter esse espaço?

Obrigado de desde já, aguardo respostas.

#2

usa jquery, eh bem mais simples:

exemplo:

&lt;table&gt; &lt;tr&gt; &lt;td id="um"&gt;ola&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td id="dois"&gt;ola&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td id="tres"&gt;ola&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;input type="button" onclick="$('#dois').hide()" /&gt;

#3

[quote=mauricioadl]usa jquery, eh bem mais simples:

exemplo:

&lt;table&gt; &lt;tr&gt; &lt;td id="um"&gt;ola&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td id="dois"&gt;ola&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td id="tres"&gt;ola&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;input type="button" onclick="$('#dois').hide()" /&gt;[/quote]
Também acho que seja a melhor abordagem.
Flus.

#4

Olá nooorton

Tenta usar a propriedade “display” do CSS em vez de visibility:

ficaria:

tipo assim:

<script type="text/javascript"> function escondeMostra(x){ if(document.getElementById(x).style.display == "none"){ document.getElementById(x).style.display = "inline"; } else{ document.getElementById(x).style.display = "none"; } } </script>

Dá uma olhada no site do Maujor, lá ele explica didaticamente qual o comportamento dessa propriedade CSS
http://www.maujor.com/tutorial/propriedade-css-display.php

#5

@mauricioadl
Muito obrigado, funcionou perfeitamente e de primeira :wink:
Valeu mesmo!

@thiagof
Testei também sua abordagem, e também funcionou! Só que por algum motivo, algum desses comandos desalinhou toda minha table.
Achei melhor utilizar jquery mesmo, ainda da para usar uns efeitinhos manerios :wink:

Valeu galera!
Ajudaram mesmo! Tava quebrando a cabeça com isso ^^

#6

tenho mais uma pequena dúvida.

Como que eu chamo essa função hide logo depois que a

é criada?

Exemplo:

Não consigo executar essa função fora do evento “onclick”.

#7

Respondendo minha propria pergunta :smiley:

Simplesmente usei o código abaixo na

que inicia a linha

Obrigado novamente a todos que me ajudaram!

#8

[quote]@mauricioadl
Muito obrigado, funcionou perfeitamente e de primeira
Valeu mesmo!

@thiagof
Testei também sua abordagem, e também funcionou! Só que por algum motivo, algum desses comandos desalinhou toda minha table.
Achei melhor utilizar jquery mesmo, ainda da para usar uns efeitinhos manerios

Valeu galera!
Ajudaram mesmo! Tava quebrando a cabeça com isso ^^ [/quote]

Acho que é porque o display deveria ser “block” ao invés de “inline” ou então deveria ser display="" para assumir o valor padrão de criação hehehe foi mal aee, eu devia ter pensado nisso, o bom e que a gente aprende tambem :smiley:

mas sempre que puder, dê preferência para a biblioteca do JQuery mesmo, é muito mais simples, na verdade, ele usa a propriedade style.display do elemento html por baixo dos panos, igual ao código da sua função inicial.

dá uma olhada na definição das funções show e hide do jquery:

show: function(a, b, c) { var d, e; if (a || a === 0) return this.animate(ct("show", 3), a, b, c); for (var g = 0, h = this.length; g < h; g++) d = this[g], d.style && (e = d.style.display, !f._data(d, "olddisplay") && e === "none" && (e = d.style.display = ""), (e === "" && f.css(d, "display") === "none" || !f.contains(d.ownerDocument.documentElement, d)) && f._data(d, "olddisplay", cu(d.nodeName))); for (g = 0; g < h; g++) { d = this[g]; if (d.style) { e = d.style.display; if (e === "" || e === "none") d.style.display = f._data(d, "olddisplay") || "" } } return this }, hide: function(a, b, c) { if (a || a === 0) return this.animate(ct("hide", 3), a, b, c); var d, e, g = 0, h = this.length; for (; g < h; g++) d = this[g], d.style && (e = f.css(d, "display"), e !== "none" && !f._data(d, "olddisplay") && f._data(d, "olddisplay", e)); for (g = 0; g < h; g++) this[g].style && (this[g].style.display = "none"); return this }
notou que é usado a propriedade style.display por lá? só que com muito mais tratamentos :smiley:

#9