Show table on page after clicking a button

Question

Show table on page after clicking a button

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (0 votes)

0

I have the following table:

<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>

I would like it to appear only after I press this button here:

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

Currently the table is fixed on the page, then when I open it already appears, but I would like it to appear only after 4 fields are filled in and the consult button is activated.

The table data I get from a DB, but I believe there is no need to post the query.

javascript jquery html5

asked by anonymous 14.12.2017 / 20:12

4 answers

Error type mismatch: Can not convert from String to String [] - How can I fix it? onclick () on elements generated through ajax?

score 2 · Answer 1

Code

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>

Explanation

I just added a style="display: none;" attribute initially to the html of your table causing it to remain hidden even though it still exists, and then added a click event with the onclick="mostrarTabela()" attribute on your button that removes this style display: none making it appear again.

If you do not know how to include the javascript code of the mostrarTabela() function that was added to your button in your html, you can put it this way at the beginning of your html (I recommend placing it inside the <head> tag):

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

And then your <table> would look like this:

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

And the button like this:

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

score 1 · Answer 2

You can use the onclick event in Submit.

You will have a <div> with the table you want to display inside. When the page opens your table it will be hidden inside a <div> with display:none and when you click on onclick of Submit it will give display:block to <div>

I put the Snippet now to facilitate (I put a simpler table with little style just to be more didactic anyway)

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>

score 1 · Answer 3

Solution different from the rest

To show and hide

Place the table inside a div display:none (remove the layout element from the page)

<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>

Another solution

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>

score 0 · Answer 4

You can add the ".hide" class to the table, like this:

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

Adds the following JS to display it.

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

This is the rusty mode, but you can also do it with jQuery and add a basic animation.

$("#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><tablewidth="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" />