Ir para conteúdo

POWERED BY:

Arquivado

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

aletres

[Resolvido] Como ocultar varias <TR> de uma vez?

Por , em Javascript

Recommended Posts

aletres    0

aletres
Postado

Exemplo:

 

<tr>
  <td>
    texto1
  </td>
</tr>
<tr>
  <td>
    texto2
  </td>
</tr>

Sei que para ocultar uma linha TR é só atribuir um ID e ocultar pelo JavaScript.

 

O problema é que eu preciso ocultar um nº indefinido de TRs ao mesmo tempo.

 

Há um jeito de fazer isso? Tentei envolter as TRs em um DIV ou SPAN mas não deu certo. Há um jeito?

 

Abaixo meu código completo, mas preciso ocultar 2 ou mais TRs ao mesmo tempo:

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TESTES</title>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_menu(menu) {
//menu1.style.display="none";	// Desliga
//menu2.style.display="";		// Liga
var menu = document.getElementById(menu);
if (menu.style.display=="none") {
	menu.style.display="";
} else {
	menu.style.display="none";
}
  
}
//-->
</script>

</head>

<body>

<table width="200" border="1">
  <tr onClick="MM_menu('menu1')">
    <td>clique1</td>
  </tr>
  <tr onClick="MM_menu('menu2')">
    <td>clique2</td>
  </tr>
  <tr onClick="MM_menu('menu3')">
    <td>clique3</td>
  </tr>
  <tr id="menu1" style="display:none">
    <td>1</td>
  </tr>
  <tr id="menu2" style="display:none">
    <td>2</td>
  </tr>
  <tr id="menu3" style="display:none">
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
</table>

</body>
</html>

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Müller    0

Guilherme Müller
Postado

Primeiramente, sugiro que você pegue a biblioteca jQuery (www.jquery.com) para facilitar este tipo de operação. Depois que você se familiariza com a linguagem esse tipo de processo fica bem simples.

Isto também irá ajudar a retirar o javascript do corpo do seu HTML, o que não é recomendado.

 

Com jQuery você poderia fazer o seguinte:

 

Exemplo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery.js"></script>
<title>TESTES</title>

<script language="Javascript" type="text/Javascript">
//função executada quando a página é carregada
$(document).ready(function() {
  //quando clicar nas TR com classe 'clique'
  $('#tabela tr.clique).click(function() {
    //pegamos a id da TR, ex: 1
    var nome = $(this).attr('id');
    //pegamos o elemento, ex: menu1 e usamos a função 'show()' para que ele apareça
    $('#menu'+nome).show();
  });
});
</script>

</head>

<body>

<table width="200" border="1" id='tabela'>
  <tr class='clique' id='1'>
    <td>clique1</td>
  </tr>
  <tr class='clique' id='2'>
    <td>clique2</td>
  </tr>
  <tr class='clique' id='3'>
    <td>clique3</td>
  </tr>
  <tr id="menu1" style="display:none">
    <td>1</td>
  </tr>
  <tr id="menu2" style="display:none">
    <td>2</td>
  </tr>
  <tr id="menu3" style="display:none">
    <td>3</td>
  </tr>
</table>

</body>
</html>

Claro que as ids dos elementos teriam que ser mais descritivas no caso de um site real, mas dá para entender.

O código acima vai fazer com que quando uma TR é clicada, pegamos o nome do elemento e utilizamos esse nome para descobrir o nome da TR que vai aparecer. Dessa forma você pode fazer quantas TRs forem necessárias que a função continua a mesma.

 

O legal do jQuery é que dá para trabalhar com classes também (ou com qualquer seletor que você utilizaria no CSS), e não pesa muito na performance do site.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Existe ainda o método:

 

getElementsByTagName() com ele você consegue obter um array de todos os elementos q especificar..

 

Oque está tentando fazer realmente?

um menu que ao clicar num item, esconde os 'submenus' dos outros itens ?

 

Veja se te ajuda:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TESTES</title>

<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function mostrar( el ){
	var ul = id('menu').getElementsByTagName('ul');
	for( var i=0; i<ul.length; i++ )
		ul[i].style.display = 'none';
		
	ul[el].style.display = 'block';
}
</script>
<style type="text/css">
#menu li ul {
	display: none;
}
</style>
</head>
<body>
	<ul id="menu">
		<li onclick="mostrar( 0 )">clique1
			<ul>
				<li>Item 1</li>
				<li>Item 1</li>
			</ul>
		</li>
		<li onclick="mostrar( 1 )">clique2
			<ul>
				<li>Item 2</li>
				<li>Item 2</li>
				<li>Item 2</li>
			</ul>
		</li>
		<li onclick="mostrar( 2 )">clique3
			<ul>
				<li>Item 3</li>
				<li>Item 3</li>
				<li>Item 3</li>
				<li>Item 3</li>
			</ul>
		</li>
	</ul><!-- /menu -->

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Müller    0

Guilherme Müller
Postado

Se você estiver fazendo um menu com submenus, não precisa usar javascript. Basta utilizar uma lista <ul> com outras listas dentro e configurar o CSS de acordo. O Javascript nesse caso apenas serviria para fazer os submenus aparecerem nos browsers jurássicos (IE6).

 

Ex: http://www.alistapart.com/articles/horizdropdowns/

Compartilhar este post

Link para o post
Compartilhar em outros sites

aletres    0

aletres
Postado

Referente ao meu topico: http://forum.imasters.com.br/index.php?/topic/372810-como-trocar-uma-classe-por-outra-em-todos-os-objetos-da-1-classe/

 

Me indicaram a usar o codigo:

 

function escondeTaisClasses(classeAEsconder){
   $("."+classeAEsconder).css("display", "none");
}

Porém retorna um erro: '$formato' não está definido.

 

Alguem sabe me dizer o que falta?:

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TESTES</title>

<style type="text/css">
  .formato {color:#00FF00 }
</style>

<script language="JavaScript" type="text/JavaScript">
<!--
function AlteraClasse(){
	alert("Vai alterar...");
   	$formato.css("color", "#0000FF");
   	alert("Alterou.");
}
//-->
</script>

</head>

<body>

<table width="200" border="1">
  <tr id="menu1" onClick="AlteraClasse()" class="formato">
    <td><b>Color1</b></td>
  </tr>
</table>

</body>
</html>

Tentei alterar uma linha por esta: 

$(".formato").css("color", "#0000FF");
Mas dá erro "Objeto Esperado".

 

Utilizei o codigo daqui (ítem 7): http://www.juliobitencourt.com/2009/10/10-dicas-para-escrever-um-bom-codigo-jquery/

 

Valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites

aletres    0

aletres
Postado

Agora entendi...

 

Adicionei a linha:

 

<script src="http://code.jquery.com/jquery-latest.js"></script>

E tudo funcionou. :rolleyes:

 

Apesar de encerrar o Tópico... eu vou ficar dependente deste link? Não há como eu implementar no meu próprio código?

 

Consegui o que queria:

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TESTES</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
function AlteraClasse(){
	alert("Vai alterar...");
   	$(".formato").css("color", "#0000FF");
   	alert("Alterou.");
}
//-->
</script>

<style type="text/css">
  .formato {color:#00FF00 }
</style>

</head>

<body>

<table width="200" border="1">
  <tr id="menu1" onClick="AlteraClasse()" class="formato">
    <td><b>Color1</b></td>
  </tr>
</table>

</body>
</html>

Valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Müller    0

Guilherme Müller
Postado

Sim, para usar o jquery você vai precisar carregá-lo sempre nas suas páginas. Mas depois que você acostumar você nem percebe mais ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

eu vou ficar dependente deste link? Não há como eu implementar no meu próprio código?

 

você pode copiar o conteudo do link, e criar esse arquivo numa pasta do teu sistema.

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