Do not include class specific in table filter

Question

Do not include class specific in table filter

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Good afternoon,

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

I needed some rows that have the class .hiddenRow not to be picked up by the filter, and I've tried some solutions and even then, I can not get the result I want.

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>

Can anyone help?

html jquery

asked by anonymous 22.06.2018 / 13:22

2 answers

how to install the portuguese package babel texmaker Referencing scripts on different PHP pages

score 0 · Answer 1

Use the pseudo selector css not applied to your td s.

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>

score 0 · Answer 2

I decided to give a class rows that wanted to be filtered, without putting that same class in the rest and added 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 in 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>