[RESOLVIDO] - Ajuda para ocultar uma linha de tabela

Front-end
#1

Galera,

Sou novato em Jquery e estou com uma dúvida. Tenho necessidade de ocultar uma linha da thead que é gerada pelo plugin jquery.tableFilter. Este plugin adciona automaticamente uma linha ao meu thead com inputs para pesquisa. Minha ideia é criar um botao para ocultar/exibir esta linha via jquery.

Minha thead está assim:

<thead>
			<tr>
				<th>#</th>
				<th>ID</th>
				<th>CPF</th>
				<th>Nome</th>
				<th>Cargo</th>
				<th>Carga Horária</th>
				<th>Tel. Fixo</th>
				<th>Tel. Celular</th>
			</tr>
		</thead>

Depois de renderizado ele fica assim(por conta do tableFilter):

<thead>
			<tr>
				<th class="header">#</th>
				<th class="header">ID</th>
				<th class="header">CPF</th>
				<th class="header">Nome</th>
				<th class="header">Cargo</th>
				<th class="header">Carga Horária</th>
				<th class="header">Tel. Fixo</th>
				<th class="header">Tel. Celular</th>
			</tr>
		<tr class=""><th class=""></th><th class=""><input type="text" class="input-small"></th><th class=""><input type="text" class="input-small"></th><th class=""><input type="text" class="input-small"></th><th class=""><input type="text" class="input-small"></th><th class=""><input type="text" class="input-small"></th><th class=""><input type="text" class="input-small"></th><th class=""><input type="text" class="input-small"></th></tr></thead>

Eu até consigo ocultar a linha do thead com este método:

$("#tabela").on($(this).click(), "thead tr:nth-child(2)" , function() { $(this).closest("tr").hide(); });

So que eu queria fazer esse ocultar/exibir atraves de um botao.

Alguem poderia me ajudar?

#2

Olá,
Uma saida seria vc colocar IDs nos td ou th e ocultar com o Jquery
Exemplo

HTML

    <thead>  
                <tr>  
                    <th>#</th>  
                    <th>ID</th>  
                    <th >CPF</th>  
                    <th>Nome</th>  
                    <th id="teste">Cargo</th>  
                    <th>Carga Horária</th>  
                    <th id="teste2">Tel. Fixo</th>  
                    <th>Tel. Celular</th>  
                </tr>  
            </thead>

Jquery

$("#teste").click(function(){
   $(this).hide();
});

ou acessar a coleção na posição x


$("th").eq(x).click(function(){
   $(this).hide();
});
#3

Você pode usar o http://api.jquery.com/slideToggle/ ou se preferir http://api.jquery.com/fadeToggle/

Creio que isso possa te ajudar.

#4

Segue abaixo um exemplo básico para fixação:

<html>
	<head>
	  <script src="http://code.jquery.com/jquery-latest.js"></script>
	</head>
	<body>
	  <ul>
		<li>Essas linhas </li>
		<li>irão desaparecer</li>
		<li>ao clicar no botão</li>
		
		<button>Slide/Show</button>
		<button>Fade/Show</button>
	  </ul>
	<script>
		// primeiro botão o efeito é slide IN/OUT
		$("button:first").click(function(){
			$("li").slideToggle("slow");
		});
		
		//Ultimo botão o efeito é fade IN/OUT
		$("button:last").click(function(){
			$("li").fadeToggle(2000);//2000 é o tempo do efeito em milesegundos equivale à 2 seg.
		});
	</script>
	</body>
</html>
#5

Rapaz,

Tenho orgulho de fazer parte desta lista!! :slight_smile:

Conseguir fazer!!

Como eu disse, a minha 2º linha da thead é criada dinamicamente e por isso que nao estava conseguindo uma forma de acessar! Olhando os códigos que me mandaram eu fiz um mix e resolveu:

$("#ocultar").click(function () { $("thead tr:last").slideToggle("slow"); });

Muito show!

Estou encantado com Jquery!

Brigadão a todos!!

#6