Show table on page after clicking a button

Asked

Viewed 1,914 times

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>

and 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, so when I open it already appears, but I would like it to be presented only after 4 fields are filled and the query button is triggered.

Table data I receive from a BD, but I believe there is no need to post the query.

javascript jquery html5

  • I’m developing an example for you of how to do this, but before that I’d like to warn you that near $linha["programatica"] you have a syntax problem, a php closure that should be ?> and is like >, and also close to $linha["nome_fornecedor"] you tme a td not closed properly: /td>

  • I must have deleted it at the time I was arranging the code here, because it is working 100% so far, thanks for the remark @Pauloroberto

  • Create the table or show the table after clicking the button?

  • If the table will modify every click on the button, it should be mounted via Ajax.

  • Please correct the question title if the problem is showing the table and not creating it. Explain better what you want to happen and what currently happens

  • @Pauloroberto , I corrected the title and increased with the information you requested

  • @Leocaracciolo is to show the table, corrected the title

  • Blz, don’t forget to dial as aceita the answer that solved your question, see how and why in https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079

  • good, for now none solved, so I did not mark as accepted, but I am debating here still, there was one that came next hahaha but it did not go all right

Show 4 more comments

4 answers

2

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 an attribute style="display: none;" initially to your table’s html causing it to remain hidden even if it still exists, and later added a click event with the attribute onclick="mostrarTabela()" on your button that removes this style display: none causing her to appear again.

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

<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 this way:

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

  • the table appears for 1 second after it disappears again

  • There are no apparent reasons for this to happen, so there must be some code running in your application that is not in your question, it is the only explanation for this. After all events that happen after x time are the work of setTimeout() or setInterval() and I don’t see any of them in your code.

  • well, it has nothing of setTmeout and nor setInterval in my code, I spoke 1 second but in fact it appears and goes very fast, I think it has nothing to do with time

  • I think your problem is actually another one... I suggest supplementing your question even more with as close to what is happening in its application, there is something that is not here that is causing your problem.

1

You can use the event onclick in Submit.

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

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

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>

  • the <style> I would put where?

  • do not recommend setting the display from a table to block. in certain cases can be a problem.

  • @Pauloroberto you’re right, so I created a div container on the outside, it will take the display:block now

  • @hugocsl did the div and the JS but it didn’t work ):

  • @V.Avancini if the Snippet is working does not have pq not working in yours. Check out the Ids correctly in Scrip and HTML. They may be different from your pq I did just as an example.

  • @hugocsl is that my page has other elements tbm, like header and footer, you think it could interfere?

  • @V.Avancini I believe that not because it grabs the element by the ID, but glue the code there and test, but we have other answers here, if I could help with something tells me!

Show 2 more comments

1

Solution different from the others

To show and hide

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

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

0

You can add the class ". Hide" in the table, this way:

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

Add the following JS to display it.

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

This is the rustic 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>
<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" />

  • the problem is that the table will change, so the need of the button, the user will choose some options and these options will be criteria for my select

  • Got it. In this case you can use jQuery ajax to send a request to the server to mount the table and return the HTML code. Then just take this return and apply on the page with jQuery("#result").append(response)

  • I believe that answers should only be involved with the use of [tag:javascript] because there are no [tag:jQuery] tags on the question.

  • Paul, the first option I gave was with pure javascritp. The second form was an addendum, an alternative. In the case of the comment, really, I should add a pure JS. If it is of interest I leave my errata here. document.querySelector("#result").innerHTML = response;

  • 1

    @Pauloroberto I’ll add the jquery, because I’m using here tbm

Browser other questions tagged javascript jquery html5

You are not signed in. Login or sign up in order to post.