Do not include class specifics in the table filter

Question

Good afternoon,

I have a jQuery filter implemented in a search bar, to filter Rows from an HTML table in Bootstrap.

Needed, that some Rows that have the class . hiddenRow were not picked up by the filter, and I have tried some solutions and yet, I cannot get the result I wish for.

This is the filter:

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

I’ve tried to include:

return $(row).hasClass('hiddenRow') ? false : true;

The table is as follows:

<table class="table table-responsive table-hover table-bordered" style="border-collapse:collapse;">
   <thead class="thead-color">
       <tr>
         <th scope="col">Ver</th>
         <th scope="col">Cliente</th>
         <th scope="col">Data</th>
         <th scope="col">Inserido Por</th>
         <th scope="col">Data de Inserção</th>
         <th scope="col">Editar</th>
         <th scope="col">Eliminar</th>
       </tr>
       </thead>
       <tbody id="fltRep" class="panel">
       <?php
       while ($row = mysqli_fetch_array($query))
       {
       echo '<tr>
             td><a href="" class="accordion-toggle" data-toggle="collapse" data-target="#row'.$row['id'].'"><i class="lnr lnr-plus-circle"></i></a></td>                                                           <td>'.$row['client'].'</td>                                                          <td>'.$row['date'].'</td>                                                          <td>'.$row['username'].'</td>                                                            <td>'.$row['insert_date'].'</td>
             <td><a href="edit-reports.php?id='.$row['id'].'"><i class="fa fa-edit"></i></a></td>
             <td><a href="delete/deleteReports.php?id='.$row['id'].'"><i class="lnr lnr-cross-circle"></i></a></td>
          </tr>
          <tr>
             <td colspan="7"  class="hiddenRow"><div class="accordian-body collapse" id="row'.$row['id'].'">'.$row['report'].'</div></td>
          </tr>';
       }
       ?>
       </tbody>
    </table>

Anyone can help?

Answer 1

Use the pseudo css selector not applied over their tds.

Example:

#myTable tr td:not(.hiddenTd) {
  color: white;
  background-color: blue;
}

<table id="myTable">
  <th>
    <td>Header 1</td>
    <td>Header 2</td>
    <td>Header 3</td>
  </th>
  <tr>
    <td class="hiddenTd" colspan="3">Coluna 1 e 2</td>
    <td>Coluna 3</td>
  </tr>
  <tr>
    <td class="notHiddenTd" colspan="3">Coluna 1 e 2</td>
    <td>Coluna 3</td>
  </tr>
</table>

Answer 2

I decided to give a class the Rows I wanted to be filtered, without putting the same class in the remaining ones and adding the class in jQuery.

$(document).ready(function(){
  $("#repInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#fltRep tr.filtered").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

And I put the class on the TR.

<tr class="filtered">
                                                        <td><a href="" class="accordion-toggle" data-toggle="collapse" data-target="#row'.$row['id'].'"><i class="lnr lnr-plus-circle"></i></a></td>
                                                        <td>'.$row['client'].'</td>
                                                        <td>'.$row['date'].'</td>
                                                        <td>'.$row['username'].'</td>
                                                        <td>'.$row['insert_date'].'</td>
                                                        <td><a href="edit-reports.php?id='.$row['id'].'"><i class="fa fa-edit"></i></a></td>
                                                        <td><a href="delete/deleteReports.php?id='.$row['id'].'"><i class="lnr lnr-cross-circle"></i></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="7"  class="hiddenRow"><div class="accordian-body collapse" id="row'.$row['id'].'">'.$row['report'].'</div></td>
                                                    </tr>