CODEWITHSUNDEEP
jquerywebfilter
F. icker
F. icker

Reputation: 13

How can I Filter a table with <select> using JQuery?

I need help with a filter function on a table. For now I can Filter a table using Users input like this:

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

This works also great but how can I filter the table with a selection of the users. So the user could select a option:

<select name="Filter" id="myInput">
   <option id="myInput" value="error">John</option>
   <option id="myInput" value="error">Warning</option>
</select>

and after he selected something I would filter after this. The table could looks like this:

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<table>
  <thead>
  <tr>
    <th>Log</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr>
    <td>dafsdfkj Error sdfkjlsdafj dsafjk</td>

  </tr>
  <tr>
    <td>Waring dfadf adf</td>
  </tr>
  </tbody>
</table>

thx for help<3

Upvotes: 1

Views: 66

Answers (2)

Deepak A
Deepak A

Reputation: 1636

$(document).ready(function(){
  $("#myInput").on("change", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="Filter" id="myInput">
   <option   value="">All</option>
   <option   value="John">John</option>
   <option  value="Warning">Warning</option>
</select>
<table>
  <thead>
    <tr>
      <th>Log</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>dafsdfkj Error sdfkjlsdafj dsafjk</td>

    </tr>
    <tr>
      <td>Warning dfadf adf</td>
    </tr>
     <tr>
      <td>John did it</td>
    </tr>
 </tbody>
</table>

Upvotes: 0

Barmar
Barmar

Reputation: 781058

It's pretty much the same, except instead of using the keyup event you use change.

Also, you should use .each() rather than filter(), since you're not returning the value anywhere.

And you need to set the values of the options to what you want them to match, not error.

$("#myInput").on("change", function() {
  var value = $(this).val().toLowerCase();
  $("#myTable tr").each(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="Filter" id="myInput">
  <option id="myInput" value="john">John</option>
  <option id="myInput" value="warning">Warning</option>
</select>
<table>
  <thead>
    <tr>
      <th>Log</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>dafsdfkj Error sdfkjlsdafj dsafjk</td>

    </tr>
    <tr>
      <td>Warning dfadf adf</td>
    </tr>
    <tr>
      <td>John did it</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions