0

Tenho a seguinte tabela:

<table width="100%" class="table table-bordered table-hover table-responsive table-striped" id="empenho_solicitante"> 
    <thead>
    <tr> <th colspan="5"> +---------------------------------------------------------------------------------------------------+--------------------------------------------------------------------------------------------------------------+</th> </tr>
    <tr> <th colspan="2"> FIN503 - CONTABILIDADE PUBLICA </th> <th colspan="3"> RELATORIO  DE  EMPENHOS  POR  SOLICITANTE</th> </tr>
    <tr> <th colspan="2">  PREFEITURA MUNICIPAL DE ITABIRA </th> <th colspan="3"> NO PERIODO DE <?php echo $dataIni." À ".$dataFim ?> </th> </tr>
    <tr> <th colspan="5"> +-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ </th> </tr>
    <tr> <th colspan="5"> SOLICITANTE: <?php echo $cod_orgao.".".$cod_unidade." - ".$unidade; ?> </th> </tr>
    <tr> <th colspan="5"> +-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ </th> </tr>

     <tr>       
            <th>Empenho</th>
            <th>Programatica</th>
            <th>Conta Desp.</th>
            <th>Credor</th>
            <th>Valor</th>
    </tr>
   </thead>
 <tbody>

      <?php  
           while ($linha = sqlsrv_fetch_array($resultado))
           {
                ?>
                 <tr class="odd gradeA">

                 <td align = "right"> <?php echo $linha["num_empenho"]; ?> </td>
                 <td align = "center"> <?php echo $linha["programatica"]; ?></td>
                 <td align = "center"> <?php echo $linha["conta_desp"]; ?></td>
                 <td align = "left"> <?php echo $linha["nome_fornecedor"];?></td>
                 <td align = "right"> <?php echo 
                         number_format($linha["valor_empenhado"], 2, ',', '.'); 

                 $total +=  $linha["valor_empenhado"];

                 ?></td></tr>
                 <?php                                       
                     }
                      ?>                                        
               <td colspan="4" align = "middle"> <?php echo "Valor empenhado para este solicitante no período:" ?> </td>
               <td> <?php echo number_format($total, 2, ',', '.'); ?> </td>                                   
      </tbody>
</table>

e gostaria que ela aparecesse somente depois que eu apertar esse botão aqui:

<input type="submit" id="consultar" value="Consultar" /><br>

Atualmente a tabela está fixa na página, logo quando abro ela já aparece, mas gostaria que ela aprecesse somente depois que for preenchido 4 campos e o botão consultar for acionado.

Os dados da tabela eu recebo de um BD, mas acredito não haver necessidade de postar a query.

9
  • Estou desenvolvendo um exemplo pra você de como fazer isto, mas antes disto gostaria de te avisar que perto de $linha["programatica"] você tem um problema de sintaxe, um fechamento de php que deveria ser ?> e está como >, e também perto de $linha["nome_fornecedor"] você tme um td não fechado corretamente: /td> Commented 14/12/2017 às 19:28
  • devo ter apago na hora que estava arrumando o código aqui, pois está funcionando 100% até agora, obrigado pela observação @PauloRoberto
    – V.Avancini
    Commented 14/12/2017 às 19:29
  • Criar a tabela ou mostrar a tabela após clicar no botão?
    – user60252
    Commented 14/12/2017 às 20:05
  • Se a tabela irá modificar a cada clique no botão, ela deverá ser montada via Ajax.
    – Sam
    Commented 14/12/2017 às 20:31
  • Favor corrigir o título da pergunta caso o problema seja mostrar a tabela e não cria-la. Explique melhor o que você quer que aconteca e o que atualmente acontece Commented 15/12/2017 às 10:28

4 Respostas 4

2

Código

function mostrarTabela(){
	document.getElementById('empenho_solicitante').style.display = '';
}
<table width="100%" style="display: none;" class="table table-bordered table-hover table-responsive table-striped" id="empenho_solicitante"> 
    <thead>
    <tr> <th colspan="5"> +---------------------------------------------------------------------------------------------------+--------------------------------------------------------------------------------------------------------------+</th> </tr>
    <tr> <th colspan="2"> FIN503 - CONTABILIDADE PUBLICA </th> <th colspan="3"> RELATORIO  DE  EMPENHOS  POR  SOLICITANTE</th> </tr>
    <tr> <th colspan="2">  PREFEITURA MUNICIPAL DE ITABIRA </th> <th colspan="3"> NO PERIODO DE <?php echo $dataIni." À ".$dataFim ?> </th> </tr>
    <tr> <th colspan="5"> +-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ </th> </tr>
    <tr> <th colspan="5"> SOLICITANTE: <?php echo $cod_orgao.".".$cod_unidade." - ".$unidade; ?> </th> </tr>
    <tr> <th colspan="5"> +-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ </th> </tr>

     <tr>       
            <th>Empenho</th>
            <th>Programatica</th>
            <th>Conta Desp.</th>
            <th>Credor</th>
            <th>Valor</th>
    </tr>
   </thead>
 <tbody>

      <?php  
           while ($linha = sqlsrv_fetch_array($resultado))
           {
                ?>
                 <tr class="odd gradeA">

                 <td align = "right"> <?php echo $linha["num_empenho"]; ?> </td>
                 <td align = "center"> <?php echo $linha["programatica"]; ?></td>
                 <td align = "center"> <?php echo $linha["conta_desp"]; ?></td>
                 <td align = "left"> <?php echo $linha["nome_fornecedor"];?></td>
                 <td align = "right"> <?php echo 
                         number_format($linha["valor_empenhado"], 2, ',', '.'); 

                 $total +=  $linha["valor_empenhado"];

                 ?></td></tr>
                 <?php                                       
                     }
                      ?>                                        
               <td colspan="4" align = "middle"> <?php echo "Valor empenhado para este solicitante no período:" ?> </td>
               <td> <?php echo number_format($total, 2, ',', '.'); ?> </td>                                   
      </tbody>
</table>

<input type="submit" id="consultar" value="Consultar" onclick="mostrarTabela()" /><br>

Explicação

Apenas adicionei um atributo style="display: none;" inicialmente ao html da tua tabela fazendo com que ela permaneça escondida mesmo que ainda existente, e posteriormente adicionei um evento de clique com o atributo onclick="mostrarTabela()" no teu botão que remove este estilo display: none fazendo com que ela apareça novamente.

Caso não saiba como incluir o código javascript da função mostrarTabela() que foi adicionada ao seu botão, em seu html, você pode coloca-lo desta forma no início de seu html (recomendo colocar dentro da tag <head>):

<script>
function mostrarTabela(){
    document.getElementById('empenho_solicitante').style.display = '';
}
</script>

E então sua <table> ficaria assim:

<table width="100%" style="display: none;" class="table table-bordered table-hover table-responsive table-striped" id="empenho_solicitante">

E o botão desta forma:

<input type="submit" id="consultar" value="Consultar" onclick="mostrarTabela()" /><br>
4
  • a tabela aparece por 1 segundo depois some novamente
    – V.Avancini
    Commented 14/12/2017 às 19:47
  • Não existem motivos aparentes para isso acontecer, então deve haver algum código que está sendo executado na sua aplicação cujo não se encontra na sua pergunta, é a unica explicação para isso. Afinal eventos que acontecem depois de x tempo são obra de setTimeout() ou setInterval() e não vejo nenhum deles no teu código. Commented 15/12/2017 às 10:25
  • bom, não possui nada de setTmeout e nem setInterval no meu código, eu falei 1 segundo mas na verdade ele aparece e some bem rápido, acho que não tem a ver com o tempo
    – V.Avancini
    Commented 15/12/2017 às 14:45
  • Acho que o teu problema na verdade é outro... sugiro complementar mais ainda a sua pergunta com o mais próximo do que está acontecendo na sua aplicação, tem alguma coisa que não está aqui que está ocasionando o teu problema. Commented 15/12/2017 às 15:41
1

Vc pode usar o evento onclick no Submit.

Vc vai ter uma <div> com a tabela que quer mostrar dentro. Quando a página abrir a sua Tabela vai estar escondida dentro de uma <div> com display:none e quando clicar no onclick do Submit vai dar display:block na <div>

Coloquei o Snippet agora pra facilitar (coloquei uma tabela mais simples com pouco estilo só pra ser mais didático mesmo)

function showTable() {
    document.getElementById('container-table').style.display = "block";
}
#container-table {display: none}
table {
    height: 100px;
    width: 100%;
    background-color: gray;
}
<input type="submit" id="consultar" value="Consultar" onclick="showTable()" /><br>
    
<div id="container-table">
    <table>
        <tr>
            <td>Teste</td>
        </tr>
    </table>
</div>

7
  • o <style> eu colocaria onde?
    – V.Avancini
    Commented 14/12/2017 às 19:33
  • não recomendo setar o display de uma tabela para block. em determinados casos pode ser um problema. Commented 14/12/2017 às 19:45
  • @PauloRoberto vc tem razão, então criei uma div container por fora, ela que vai levar o display:block agora
    – hugocsl
    Commented 14/12/2017 às 20:23
  • @hugocsl fiz a div e o JS mas não funcionou ):
    – V.Avancini
    Commented 15/12/2017 às 14:58
  • @V.Avancini se no Snippet está funcionando não tem pq não funcionar no seu. Confira os IDs direitinho no Scrip e no HTML. Podem estar diferentes do seu pq fiz apenas como exemplo.
    – hugocsl
    Commented 15/12/2017 às 15:05
1

Solução diferente dos demais

Para mostrar e ocultar

Coloque a tabela dentro de uma div display:none (retira o elemento do layout da página)

<div class="pre-spoiler"><br />
<input id="consultar" value="Consultar" style="margin-left: 50px; padding: 0px; width: 80px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Consultar';}" type="button"> </div><br />
<div>

<div class="spoiler" style="display: none;">
<table width="100%" class="table table-bordered table-hover table-responsive table-striped" id="empenho_solicitante"> 
    <thead>
    <tr> <th colspan="5"> +---------------------------------------------------------------------------------------------------+--------------------------------------------------------------------------------------------------------------+</th> </tr>
    <tr> <th colspan="2"> FIN503 - CONTABILIDADE PUBLICA </th> <th colspan="3"> RELATORIO  DE  EMPENHOS  POR  SOLICITANTE</th> </tr>
    <tr> <th colspan="2">  PREFEITURA MUNICIPAL DE ITABIRA </th> <th colspan="3"> NO PERIODO DE <?php echo $dataIni." À ".$dataFim ?> </th> </tr>
    <tr> <th colspan="5"> +-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ </th> </tr>
    <tr> <th colspan="5"> SOLICITANTE: <?php echo $cod_orgao.".".$cod_unidade." - ".$unidade; ?> </th> </tr>
    <tr> <th colspan="5"> +-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ </th> </tr>

     <tr>       
            <th>Empenho</th>
            <th>Programatica</th>
            <th>Conta Desp.</th>
            <th>Credor</th>
            <th>Valor</th>
    </tr>
   </thead>
 <tbody>

      <?php  
           while ($linha = sqlsrv_fetch_array($resultado))
           {
                ?>
                 <tr class="odd gradeA">

                 <td align = "right"> <?php echo $linha["num_empenho"]; ?> </td>
                 <td align = "center"> <?php echo $linha["programatica"]; ?</td>
                 <td align = "center"> <?php echo $linha["conta_desp"]; ?></td>
                 <td align = "left"> <?php echo $linha["nome_fornecedor"];?></td>
                 <td align = "right"> <?php echo 
                         number_format($linha["valor_empenhado"], 2, ',', '.'); 

                 $total +=  $linha["valor_empenhado"];

                 ?></td></tr>
                 <?php                                       
                     }
                      ?>                                        
               <td colspan="4" align = "middle"> <?php echo "Valor empenhado para este solicitante no período:" ?> </td>
               <td> <?php echo number_format($total, 2, ',', '.'); ?> </td>                                   
      </tbody>
</table>
</div>

Outra solução

function mostraDiv(obj) {
    var el = document.getElementById('spoiler');
        if ( el.style.display == 'none' ) {
           /* se conteúdo está escondido, mostra e troca o valor do botão para: escondeOcultar */ 
           el.style.display = 'block';
           document.getElementById("consultar").value='Ocultar'
        } else {
           /* se conteúdo está a mostra, esconde o conteúdo e troca o valor do botão para: mostraConsultar */ 
           el.style.display = 'none' 
           document.getElementById("consultar").value='Consultar' 
        }
}
	
	
<input type="submit" id="consultar" value="Consultar" onclick="mostraDiv('maisinfo');" />
	
<div id="spoiler" style="display: none;">
   <table width="100%" class="table table-bordered table-hover table-responsive table-striped" id="empenho_solicitante"> 
	<thead>
	<tr> <th colspan="5"> +---------------------------------------------------------------------------------------------------+--------------------------------------------------------------------------------------------------------------+</th> </tr>
	<tr> <th colspan="2"> FIN503 - CONTABILIDADE PUBLICA </th> <th colspan="3"> RELATORIO  DE  EMPENHOS  POR  SOLICITANTE</th> </tr>
	<tr> <th colspan="2">  PREFEITURA MUNICIPAL DE ITABIRA </th> <th colspan="3"> NO PERIODO DE <?php echo $dataIni." À ".$dataFim ?> </th> </tr>
	<tr> <th colspan="5"> +-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ </th> </tr>
	<tr> <th colspan="5"> SOLICITANTE: <?php echo $cod_orgao.".".$cod_unidade." - ".$unidade; ?> </th> </tr>
	<tr> <th colspan="5"> +-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ </th> </tr>
	
	    <tr>       
	        <th>Empenho</th>
	        <th>Programatica</th>
	        <th>Conta Desp.</th>
	        <th>Credor</th>
	        <th>Valor</th>
	    </tr>
	   </thead>
	 <tbody>
	
	 <?php  
	     while ($linha = sqlsrv_fetch_array($resultado))
	     {
	 ?>
	      <tr class="odd gradeA">
	
	        <td align = "right"> <?php echo $linha["num_empenho"]; ?> </td>
	        <td align = "center"> <?php echo $linha["programatica"]; ?</td>
	        <td align = "center"> <?php echo $linha["conta_desp"]; ?></td>
	        <td align = "left"> <?php echo $linha["nome_fornecedor"];?></td>
	        <td align = "right"> 
            <?php echo 
	           number_format($linha["valor_empenhado"], 2, ',', '.'); 

	             $total +=  $linha["valor_empenhado"];
	
	        ?>
            </td>
          </tr>
	       <?php                                       
	        }
	       ?> 
          <tr>                                       
	       <td colspan="4" align = "middle"> <?php echo "Valor empenhado para este solicitante no período:" ?> </td>
	       <td> <?php echo number_format($total, 2, ',', '.'); ?> </td>  
          </tr>                                 
	      </tbody>
	</table>
	</div>

0

Você pode adicionar a classe ".hide" na tabela, dessa forma:

<table width="100%" class="table table-bordered table-hover table-responsive table-striped hide" id="empenho_solicitante">
   <!-- Code -->
</table>

Adiciona o seguinte JS para exibi-la.

document.querySelector("#consultar").addEventListener("click", function() {
  document.querySelector("#empenho_solicitante").classList.remove("hide")
})

Esse é o modo rustíco, mas você também pode fazer com o jQuery e adicionar uma animação básica.

$("#consultar").click(function(){
  $("#empenho_solicitante").slideDown()
})

$("#toggle").click(function(){
  $("#empenho_solicitante").toggle()
})
.mHide {
  display: none
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" class="table table-bordered table-hover table-responsive table-striped mHide" id="empenho_solicitante">
  
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>Line 1</td>
      <td>Line 1</td>
      <td>Line 1</td>
    </tr>
    <tr>
      <td>Line 2</td>
      <td>Line 2</td>
      <td>Line 2</td>
    </tr>
  </tbody>
  
</table>

<input type="submit" id="consultar" value="SlideDown" />

<input type="submit" id="toggle" value="Toggle" />

5
  • o problema é que a tabela vai mudar, por isso a necessidade do botão, o usuário vai escolher algumas opções e essas opções serão critérios para o meu select
    – V.Avancini
    Commented 14/12/2017 às 19:30
  • Entendi. Nesse caso você poderá utilizar o jQuery ajax para enviar uma requisição para o servidor montar a tabela e retornar o código HTML. Depois bastaria pegar esse retorno e aplicar na página com jQuery("#result").append(response) Commented 14/12/2017 às 19:33
  • Acredito que deva envolver respostas apenas com o uso de javascript pois não há tags de jquery na pergunta. Commented 14/12/2017 às 19:46
  • Paulo, a primeira opção que dei foi com javascritp puro. A segunda forma foi um adendo, uma alternativa. No caso do comentário, realmente, eu deveria adicionar um JS puro. Caso seja de interesse deixo aqui minha errata. document.querySelector("#result").innerHTML = response; Commented 14/12/2017 às 19:48
  • 1
    @PauloRoberto vou acrescentar o jquery, pq estou usando aqui tbm
    – V.Avancini
    Commented 14/12/2017 às 19:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .