Bom dia!
Poderia me ajudar, tenho um formulário de seleção com um botão, precisaria que mostrasse a tabela após clicar no botão, mas que essa tabela ficasse oculta antes clicar no botão.
Segue o código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Versão 01">
<meta name="author" content="Emerson Rolim Cuellas - GGTI/GSIS/SUAPO">
<title>Liquigás Distribuidora S.A - Solicitação de Frete Granel</title>
<!-- Estilos -->
<link href="estilos/bootstrap.min.css" rel="stylesheet">
<link href="estilos/custom.css" rel="stylesheet">
<link href="estilos/dataTables.bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-md-12"><img src="imagens/topo_logo_solic_frete.png" class="logo">
<p class="texto_logo">Solicitação de Frete Granel</p>
</div>
</div>
</div>
</header>
<main>
<section>
<div class="container">
<div class="row">
<div class="col-md-12 linha">
<div class="row">
<div class="col-md-3">
<a href="#" class="nav-tabs-dropdown btn btn-block btn-primary">Tabs</a>
<ul id="nav-tabs-wrapper" class="nav nav-tabs nav-pills nav-stacked well">
<li class="active"><a href="#vtab1" data-toggle="tab">Home</a></li>
<li><a href="#vtab2" data-toggle="tab">Nova Solicitação</a></li>
<li><a href="#vtab3" data-toggle="tab">Consultar</a></li>
<li><a href="#vtab4" data-toggle="tab">Ajuda</a></li>
</ul>
</div>
<div class="col-md-9 linha_caixa">
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="vtab1">
<h3 class="texto_cabec">Bem Vindos ao Sistema de Solicitação de Frete Granel</h3>
<img src="imagens/caminhao_granel.png" class="imagem_granel">
</div>
<div role="tabpanel" class="tab-pane fade in" id="vtab2">
</div>
<div role="tabpanel" class="tab-pane fade in" id="vtab3">
<p style="margin-left:5px; font-size:26px; font-weight:bold; color:#000;">Consultar Solicitação</p>
<p style="margin-top:-28px; margin-bottom:10px;">
<span style="font-size:26px; font-weight:bold; color:#FDC82F; margin-left:5px;">__</span>
</p>
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-4">
<select class="form-control area_sel">
<option>Selecionar a opção</option>
<option>Número</option>
<option>Status</option>
<option>Por Aprovador</option>
<option>Por Solicitante</option>
<option>Data de Criação</option>
<option>Dados Gerais</option>
<option>Resumo Mensal</option>
<option>Resumo Mensal Exp.</option>
<option>Previsão de Venda</option>
</select>
</div>
<div class="col-md-4">
<input id="name" name="name" type="text" placeholder="" class="form-control input-pesq" required>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary">Pesquisar</button>
</div>
<div class="separador"></div>
</div>
</form>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Ano</th>
<th>Número</th>
<th>Status</th>
<th>Solicitante</th>
<th>Responsável</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Ano</th>
<th>Número</th>
<th>Status</th>
<th>Solicitante</th>
<th>Responsável</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>2016</td>
<td>0001</td>
<td>Em atendimento</td>
<td>Loren Loren</td>
<td>GGLOG</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
</tr>
</tbody>
</table>
</div>
<div role="tabpanel" class="tab-pane fade in" id="vtab4">
<p style="margin-left:5px; font-size:26px; font-weight:bold; color:#000;">Posso Ajudar?</p>
<p style="margin-top:-28px; margin-bottom:10px;">
<span style="font-size:26px; font-weight:bold; color:#FDC82F; margin-left:5px;">__</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!---Rodapé ---->
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Copyright © 2017. Liquigás Distribuidora S.A. - Todos os direitos reservados</p>
</div>
</div>
</div>
</footer>
</section>
</main>
<!---Javascripts ---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.js"></script>
<script src="js/dataTables.bootstrap.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
