[RESOLVIDO][DÚVIDA JQUERY] document.getElementById("id").style.display="none" não funciona

Front-end
#1

Olá, uso com muita frequencia uma function jquery que mostra ou esconde determinada div dependendo de valores de um select.

html:

<script>
function show(){
if($('#acao').val()=="mostra") document.getElementById("teste").style.display="block";
if($('#acao').val()=="esconde") document.getElementById("teste").style.display="none";
}
</script>

<form>
<select id="acao" onchange="show()"><option value="mostra">mostra</option><option value="esconde">esconde</option></select>
</form>
<div id="teste">teste teste teste</div>

isso do jeito que está, funciona.

mas não funciona se eu colocar dentro da div pedaço de uma tabela

<script>
function show(){
if($('#acao').val()=="mostra") document.getElementById("teste").style.display="block";
if($('#acao').val()=="esconde") document.getElementById("teste").style.display="none";
}
</script>

<form>
<select id="acao" onchange="show()"><option value="mostra">mostra</option><option value="esconde">esconde</option></select>
</form>

<table>
<tr><td>titulo></td></tr>
<tr><td>linha1></td></tr>
<div id="teste">
<tr><td>linha2></td></tr>
</div>

isso /\ … não funciona, sempre aparece a linha2 da tabela, mas gostaria que ela aparecesse apenas quando o select for igual a “mostrar”.

Porque isso acontece ? Existe algum outro método de fazer isso sem dar submit ?

***se eu puser a tabela inteira dentro da div, funciona, mas realmente gostaria de mostrar e esconder só algumas linhas

VaLEWWEW

#2

Na verdade isso não é possível:

<table>  
  <tr><td>titulo></td></tr>  
  <tr><td>linha1></td></tr>  
  <div id="teste">  
  <tr><td>linha2></td></tr>  
  </div>

pois não pode existir uma div externa ao tr dessa forma, o que você pode fazer é colocar o id no “tr” e como você utiliza jQuery faça assim:

<script>  
 function show(){  
   if($('#acao').val()=="mostra") $("#teste").show();  
   if($('#acao').val()=="esconde") $("#teste").hide();  
 }  
 </script>

com o "hide() "e o “show()” escreve menos e é mais prático.

#3

Ao invés colocar uma div em volta da linha, defina uma classe para essa linha (Ex: ‘class=“mostrarOuEsconder”’) e mostre ou esconda com o jQuery.

&lt;script&gt;
function show(){
if($('#acao').val()=="mostra") 
    jQuery('.mostrarOuEsconder').show();
if($('#acao').val()=="esconde") 
    jQuery('.mostrarOuEsconder').hide();
}
&lt;/script&gt;

&lt;form&gt;
&lt;select id="acao" onchange="show()"&gt;&lt;option value="mostra"&gt;mostra&lt;/option&gt;&lt;option value="esconde"&gt;esconde&lt;/option&gt;&lt;/select&gt;
&lt;/form&gt;

&lt;table&gt;
	&lt;tr&gt;
		&lt;td&gt;titulo&gt;&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;td&gt;linha1&gt;&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr class="mostrarOuEsconder"&gt;
		&lt;td&gt;linha2&gt;&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;

Espero ter ajudado.

#4

/\ fiz isso mesmo … da classe, é o que eu esperava

valewwww

#5