Search in jQuery displaying the TR closest as a header!

Question

Search in jQuery displaying the TR closest as a header!

Navigation

#1 by (0 votes)

0

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?

javascript jquery

asked by anonymous 09.10.2017 / 20:37

1 answer

Sort elements on canvas with CSS Android notification buttons do not appear on the mobile device

score 0 · Answer 1

I separated the table into several <tbody> to group the data.

After searching in input , only the tbody that has on some of its lines a name equal to the value entered in input will be displayed.

Remember that Javascript is case-sensitive.

$(".filter-nome").keyup(function(){

  var valor = $(this).val();
  $(".cab_interno tr").each(function(index){
    
    //Tbody atual:
    $cabecalho  = $(this).parent("tbody"); 
    
    //linha do tbody:
    $linha      = $(this); 
    
    //Coluna nome:
    $nome       = $linha.find("td:nth-child(2)").text(); 

    if ($nome.indexOf(valor) != 0) {
      //$cabecalho.hide();
      $linha.hide();
      
    }
    else {
      $linha.show();
      $cabecalho.find("tr:first-child").show();
    }
  });
});

.cab_interno th{
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 8px;
}

<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>
<table class="table table-stripped table-bordered lista-certidoes">
    	<thead>
    		<tr>
    			<th>Nº</th>
    			<th>Nome</th>
    			<th>Nº PROTOCOLO</th>
    		</tr>
    	</thead>
    	<tbody class="cab_interno">
    		<tr>
    			<th colspan="3">A</th>
    		</tr>
    		<tr>
    			<td>137418</td>
    			<td>Texto A</td>
    			<td>11225566</td>
    		</tr>
      </tbody>
      <tbody class="cab_interno">
    		<tr>
    			<th colspan="3">B</th>
    		</tr>
    		<tr>
    			<td>122222</td>
    			<td>Texto 1B</td>
    			<td>11225566</td>
    		</tr>
        <tr>
    			<td>122222</td>
    			<td>Texto 2B</td>
    			<td>11225566</td>
    		</tr>
    	</tbody>
      <tbody class="cab_interno">
         <tr>
            <th colspan="3">C</th>
        </tr>
        <tr>
            <td>122222</td>
            <td>Nononono</td>
            <td>11225566</td>
        </tr>
         <tr>
            <td>133</td>
            <td>Nanana Nonono Nonono</td>
            <td>11225566</td>
        </tr>
      </tbody>
    </table>