Ir para conteúdo

Arquivado

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

fabiobnc

Mostrar / ocultar tabela - propriedade display / visibility

Por , em Javascript

Recommended Posts

fabiobnc    0

fabiobnc
Postado

Boa noite galera, vamos ver se consigo me expressar direito.

 

Tenho uma tabela e, dentro dela tenho diversas outras tabelas, cada uma com name e id definidos.

 

O que quero fazer é, ao clicar em um link, localizado em uma td da tabela principal, ele chame uma função (passando como parâmetro o ID de uma tabela secundária) que altere o parâmetro de display ou visibility (mais apropriado o display para não ocupar o espaço na página) da tabela secundária.

 

Ou seja, cada vez que clico no link, ele mostra ou oculta os dados dessa tabela.

 

Abaixo, segue um exemplo de código html e a função java utilizada. No exemplo, a tabela principal possui 3 linhas e está sendo exibida a tabela secundária (detalhes) da segunda linha.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Apoio</title>
    </head>
    <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">

<script language="JavaScript">
function mostraDetalhes("tabela")
{
    if (document.getElementById("tabela").style.display == "none")
    {
        document.getElementById("tabela").style.display = "block"
    }
    else
    {
        document.getElementById("tabela").style.display = "none"
    }
}
</script>


        <table width="70%" height="8%" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <th colspan=4 style="padding-bottom:20px; padding-top:30px; border:0">DADOS</th>
            </tr>
            
            <tr>
                <th valign=center style="padding-bottom:20px">APPLID/TGROUP</th>
                <th valign=center style="padding-bottom:20px">STND</th>
                <th valign=center style="padding-bottom:20px">STIS</th>
                <th valign=center style="padding-bottom:20px">STWE</th>
            </tr>
            
            <tr>
            
                <td align=center><a href="javascript:mostraDetalhes(0A01);">0A01</a></td>
                <td align=center>48</td>
                <td align=center>35</td>
                <td align=center>10</td>
            </tr>
            
            <tr>
                <td colspan="4">
                    <table id="0A01" name="0A01" width="30%" align=center style="display:none">
                    
                        <tr bgcolor="#708090">
                            <td align=center rowspan="2" valign=center>ESTATISTICAS</td>
                            <td align=center valign=center>QR</td>
                            <td align=center valign=center>DBT</td>
                            <td align=center valign=center>ENQ</td>
                            <td align=center valign=center>AMX</td>
                        </tr>
                        
                        <tr bgcolor="#708090">
                        
                            <td align=center valign=center>34</td>
                            <td align=center valign=center>23</td>
                            <td align=center valign=center>65</td>
                            <td align=center valign=center>45</td>
                        </tr>
                        
                    </table>
                </td>
            </tr>
        
            <tr>
            
                <td align=center><a href="javascript:mostraDetalhes(0A02);">0A02</a></td>
                <td align=center>22</td>
                <td align=center>15</td>
                <td align=center>33</td>
            </tr>
            
            <tr>
                <td colspan="4">
                    <table id="0A02" name="0A02" width="30%" align=center style="display:block">
                    
                        <tr bgcolor="#708090">
                            <td align=center rowspan="2" valign=center>ESTATISTICAS</td>
                            <td align=center valign=center>QR</td>
                            <td align=center valign=center>DBT</td>
                            <td align=center valign=center>ENQ</td>
                            <td align=center valign=center>AMX</td>
                        </tr>
                        
                        <tr bgcolor="#708090">
                        
                            <td align=center valign=center>87</td>
                            <td align=center valign=center>78</td>
                            <td align=center valign=center>78</td>
                            <td align=center valign=center>45</td>
                        </tr>
                        
                    </table>
                </td>
            </tr>
        
            <tr>
            
                <td align=center><a href="javascript:mostraDetalhes(0A03);">0A03</a></td>
                <td align=center>34</td>
                <td align=center>78</td>
                <td align=center>70</td>
            </tr>
            
            <tr>
                <td colspan="4">
                    <table id="0A03" name="0A03" width="30%" align=center style="display:none">
                    
                        <tr bgcolor="#708090">
                            <td align=center rowspan="2" valign=center>ESTATISTICAS</td>
                            <td align=center valign=center>QR</td>
                            <td align=center valign=center>DBT</td>
                            <td align=center valign=center>ENQ</td>
                            <td align=center valign=center>AMX</td>
                        </tr>
                        
                        <tr bgcolor="#708090">
                        
                            <td align=center valign=center>34</td>
                            <td align=center valign=center>90</td>
                            <td align=center valign=center>23</td>
                            <td align=center valign=center>66</td>
                        </tr>
                        
                    </table>
                </td>
            </tr>
        </table>

    </body>
</html>

Desde já agradeço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

fabiobnc    0

fabiobnc
Postado

Boa noite galera!

 

Depois de esfriar a cabeça, assistir uma TV e jogar um dota consegui pensar na solução e está tudo funcionando perfeitamente!

 

A diferença básica foi que criei uma variável pra pegar o ID passado na função e usei essa variável para alterar o display, solução vista em um tópico semelhante, respondido por um moderador!

 

function mostraDetalhes(tabela){    var status = document.getElementById(tabela);            if (status.style.display == "none")    {        status.style.display = "block";    }    else    {        status.style.display = "none";    }}</script>

Tudo redondo!

 

Valeu Imasters!

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