Ir para conteúdo

POWERED BY:

Arquivado

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

MisterMano

[Resolvido] jQuery: toggle de tabela dinâmica

Por , em Javascript

Recommended Posts

MisterMano    0

MisterMano
Postado

Bem, estou com um problema e dúvida usando jQuery. Tenho uma tabela que é preenchida depois de uma busca no banco de dados. A listagem inicial mostra só alguns campos. Estou tentando fazer com que, ao clicar em uma linha, todos os outros campos daquele elemento apareçam.

 

 

Segue abaixo o código, espero que de para entender

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
<!-- FunkyStuff gets executeed when page is ready -->
function init() {
$(".esconde").hide(); //the table with the larger image
$(".tabela").hide(); //the table with the other fields

$("td.trigger").click(function(event) {
$(".tabela").toggle(500);
$(".esconde").toggle(500);
}); //works to an extent

}

<!-- When the page is ready - call FunkyStuff -->
$(document).ready(init);
//]]>
</script>
</head>
<body>
<thead>
<th> </th>
<th><h3 alt="Organizar">Matrícula</h3></th>
<th><h3>Nome Completo</h3></th>
<th><h3>Setor</h3></th>
<th><h3>Ramal</h3></th>
<th><h3>Comissao</h3></th></thead><tbody>
<tr >
<c:forEach var="funcionario" items="${Funcionarios}" varStatus="stat">
<td class="trigger">(small image here)</td>
<td class="trigger">Field 1</td>
<td class="trigger">Field 2</td>
<td class="trigger">Field 3</td>
<div class="lista">
<table class="tabela" width="100%" border="0" cellspacing="10" >
<tr>
<td width="25%">(here I show the same image, larger size)</td>
<td width="75%"><table class="esconde" width="100%" border="0" cellpadding="2">
<tr>
<td>Field 1</td>
<td>Field 2</td>
</tr>
<tr>
<td>Field 3</td>
<td>Field 4</td>
</tr>
<tr>
<td>Field 5</td>
<td>Field 6</td>
</tr>
</table></td>
</tr>
</table>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</body>

Estou usando JSP com JSTL, por isso o <c:foreach>. No momento, estou imprimindo todos os campos, mas alguns estão dentro das tabelas a serem escondidas. Assim, quando clicar na linha, eles devem aparecer. Eu só sei que vai ser alguma linha besta dentro do meu ("td.trigger")function, mas eu não sei ao certo o que usar. Já tentei nextUntil(), prevUntil(), parentUntil(), siblings(), children(), chamar parentNode() varias vezes, todos com e sem parâmetros, mas nada funcionou.

 

Se alguém puder me dizer o que devo fazer ou se há uma solução mais fácil, como por exemplo, quando clicar, mudar os valores de parametros para os da linha clicada, também será de grande ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

MisterMano    0

MisterMano
Postado

Na verdade essas soluções não são boas para o meu caso. Acredito que eu também não fui muito claro.

Todas as informações já estão carregadas na página, eu só preciso mostrar/esconder quando o usuário clicar.

A lista basica tem que ser totalmente visível em uma tabela, portanto, não adiantaria muito usar o combobox.

 

Do jeito que está, eu consigo mostrar e esconder, mas afetando todas as linhas mesmo tempo, imprimindo tudo no mesmo lugar. O único problema é que não consigo fazer com que o script abra e feche somente as informações extras daquela linha.

 

EDIT: Consegui fazer funcionar mais ou menos. Na hora de dar o toggle, eu usei

$(".tabela", this).toggle(500);
$(".esconde", this).toggle(500);

O problema agora é, só funciona quando clico na última coluna, no exemplo, seria Field 3. Vou ter que fazer ações pra cada uma das colunas pra funcionar direito??

Compartilhar este post

Link para o post
Compartilhar em outros sites

MisterMano    0

MisterMano
Postado

Resolvi!!! Ao invés de fazer o toggle do que quero mostrar pelas tabelas, fiz mais uma coluna na repetição.

//repetição...
<td class="acao">Field 1</td>
<td class="acao">Field 2</td>
<td class="acao">Field 3</td>
<td class="mostra">O QUE QUERO MOSTRAR</td>
//fim repetição

 

e no script, ficou assim:

$("td.acao").click(function(event) {
$(".mostra").hide();
$(this).siblings(".mostra").toggle(600);
});

 

Pode fechar o tópico.

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