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