Jump to content


Ocultar e Mostrar Tabela


  • Please log in to reply
1 reply to this topic

#1 Adson Aquino

Adson Aquino
  • Membros
  • 6 posts

Posted 11 August 2009 - 12:59 PM

Olá, tô com um problema no meu sistema, gostaria de colocar ele para ocultar e mostrar as linhas de uma tabela, ocultando ele já está mais quando mando mostrar ele não mostra fica só uma linha em branco, como posso resolver isso, segue o código abaixo...


CODE
// script que oculta
<script>
function action(id){
    var el = document.getElementById(id);
    (el.style.display == 'none') ? el.style.display = 'block' : el.style.display = 'none';
}
</script>



        <tr  bgcolor="#EFEFEF" onmouseover="this.style.backgroundColor='#D1D7DC';" onmouseout="this.style.backgroundColor='#EFEFEF';">

                <td colspan="3"><font color="#000033"><strong><center><?=$l[''].' Vendedor - '.$l['users_nome']?><input type="button" value="Ação!" onclick="action('list_<?=$l['valores_id']?>');" />
</strong></center></font></td>          

        </tr>
<?php
        endif;

                

        $idAtual = $l['users_id'];
?>
        <tr id="list_<?=$l['valores_id']?>" bgcolor="#EFEFEF" onmouseover="this.style.backgroundColor='#D1D7DC';" onmouseout="this.style.backgroundColor='#EFEFEF';">

                <td style="display:none;"><center><?=$l['usuarios_nome']?> </center></td>              

                <td style="display:none;"><center><?=$l['valores_valor']?></center></td>

                <td style="display:none;"><center><a href="salvapag.php?id=<?=$l['valores_id']?>"><img style='alt='Finalizar' src='http://comercial.brisanet.com.br/images/seta.png' title='Efetuar Pagamento'/></a></center></td>

        </tr>


#2 ωℋĦτکﬠσ̲η

ωℋĦτکﬠσ̲η
  • Membros
  • 4 posts

Posted 22 August 2009 - 06:33 PM

Olá amigo, eu tenho um sistema aqui em Javascript, espero que ele te ajude, pode fazer quantos quizer desde que mude o id da DIV

index.html
CODE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<title>Mostrar/Ocultar</title>
<style type="text/css">
body{
    font-family: tahoma;
    font-size: 12px;
}
a:link{
    text-decoration: none;
    color: #0000FF;
    font-weight: bold;
    font-family: tahoma;
    font-size: 12px;
}
a:visited{
    text-decoration: none;
    color: #0000FF;
    font-weight: bold;
    font-family: tahoma;
    font-size: 12px;
}
a:hover{
    text-decoration: none;
    color: #1E90FF;
    font-weight: bold;
    font-family: tahoma;
    font-size: 12px;
}
a:active{
    text-decoration: none;
    color: #1E90FF;
    font-weight: bold;
    font-family: tahoma;
    font-size: 12px;
}
</style>
<script language="javascript" type="text/javascript" src="show_hide.js"></script>
</head>
<body>
<div align="center">
<a href="java script:void(0);" onclick="alternar_visibilidade('texto1');">
[Mostrar/Ocultar] Mensagem</a>
<div id="texto1" style="display:none;">Mostrando o texto</div>
</body>
</html>


show_hide.js
CODE
function alternar_visibilidade(id)
{
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}


O segredo desse codigo é:

<a href="java script:void(0);" onclick="alternar_visibilidade('texto1');">
[Mostrar/Ocultar] Mensagem</a>
<div id="texto1" style="display:none;">Mostrando o texto</div>

Para adicionar mais um, você teria que modifica-lo, deixando assim:

<a href="java script:void(0);" onclick="alternar_visibilidade('texto2');">
[Mostrar/Ocultar] Mensagem</a>
<div id="texto2" style="display:none;">Mostrando o texto</div>

E assim em diante, 3, 4..

Espero ajudar, flw.. rolleyes.gif




0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)