Filtrar Tabela

by Rapha Souza

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!------ Include the above in your HEAD tag ---------->

<div class="container">

    <div class="row">
        <div class="panel panel-primary filterable">
            <div class="panel-heading">
                <h3 class="panel-title">Users</h3>
             
            </div>
            <table class="table" id="tabelaFiltrar">
                <thead>
                    <tr class="filters">
                        <th></th>
                        <th>
                <select class="form-control" id="campoFiltro" onchange="filtrar();">
                            <option value="">Selecione</option>
                            <option value="Otto">Otto</option>
                            <option value="Thornton">Thornton</option>
                            
                        </select>
                        
                        
                        
                        
                        </th>
                        <th><button type="text" class="form-control" id="valorFiltro" >Pesquisar</button></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td><input type="text" value="Otto"><p style="display: none">
                        Otto
                        </p></td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td>2</td>
           ...

CSS

<table border="0" class="table table-striped table-bordered table-condensed" tablename="tbCadUnidDirGer" id="tbCadUnidDirGer" noaddbutton="true" nodeletebutton="false" addbuttonclass="btn btn-primary">
                <thead>
                  <tr>
                    <td class="col-md-10"><b>Cadastro</b></td>
                  </tr>
                </thead>
                <tbody>
                  <tr onclick="capturaValor(this.id)" style="display:none" id="trCaptura" detail="true" detailname="tbCadUnidDirGer">
                    <td><input type="hidden" class="form-control" name="idIndexTbCadUnidDirGer" id="idIndexTbCadUnidDirGer" value="" disabled="disabled">
                     
                       
                         <div class="row">
                         
                         
                         
                         
                        <div class="form-group col-md-6">
                          <label>Empresa</label>
                          <div class="input-group">
                            <div class="input-group-addon"><i class="fluigicon fluigicon-company icon-sm"></i></div>
                            <input type="hidden" class="form-control" name="idCodEmpr" id="idCodEmpr" value="" disabled="disabled">
                            <input type="hidden" class="form-control" name="DescEmpresa" id="DescEmpresa" value="" disabled="disabled">
                            <input type="hidden" class="form-control" name="idCodEst" id="idCodEst" value="" disabled="disabled">
                            <input type="text" class="form-control" name="idDescEmpresa" id="idDescEmpresa" data-zoom="{
                    'displayKey':'NOMEESTAB',
                    'datasetId':'ds_retornar_empresas_tabela',
                    
                    'fields':
                    [{
                      'field':'CODEMPRESA',
                      'label':'Cod.'
                     },
                     {
                    ...