I GOT THE ANSWER ON THE AMERICAN STACK, FOLLOW THE LINK OF THE ANSWER: link
> I have the following HTML
and JS
:
SEGUE LINK EXTERNAL FIDDLE: link
$(".filter-nome").keyup(function(){
var valor = $(this).val();
$(".lista-certidoes tbody tr").each(function(index){
$row = $(this);
var id = $row.find("td:nth-child(2)").text();
if (id.indexOf(valor) != 0) {
$(this).hide();
}
else {
$(this).show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div class="row">
<div class="col-12 col-lg-4">
<label for="nome">Nome</label>
<input type="text" class="form-control filter-nome" value="">
</div>
<div class="col-12 col-lg-4">
<label for="oab">Nº</label>
<input type="text" class="form-control filter-oab" value="">
</div>
<div class="col-12 col-lg-4">
<label for="protocolo">Nº Protocolo</label>
<input type="text" class="form-control filter-protocolo" value="">
</div>
</div>
<table class="table table-stripped table-bordered lista-certidoes">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Nº PROTOCOLO</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3" class="cab_interno">A</td>
</tr>
<tr>
<td >137418</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
<tr>
<td colspan="3" class="cab_interno">B</td>
</tr>
<tr>
<td >122222</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
...
</tbody>
</table>
So far so good, but normal, I'd like to let you see the TR that has td with the class .cab_interno
, which is the Letter corresponding to that "part" of the list.
I tried to use this below, along with $(this).show();
, but it did not work ..
$(this).closest('tr > td.cab_interno').fadeIn('slow', function() {
console.log("OK");
});
Could someone give me some help there?