[ANSWERED] javascript – Jquery dropdown filter for tables

Question 1

You can check the value of dropdown and then filter it

like

$(document).ready(function($) {
  $('#selectField').change(function() {
  var selection = $(this).val();
  var dataset = $('table').find('tr');
  var unSelectedData;
  dataset.show();
  if (selection !== ' ') {
    var unSelectedData = dataset.filter(function(index, item) {
      return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
    })
  }
  if (unSelectedData) {
     unSelectedData.hide();
  }
});
});

$(document).ready(function($) {
  $('#selectField').change(function() {
    var selection = $(this).val();
    var dataset = $('table').find('tr');
    var unSelectedData;
    dataset.show();
    if (selection !== ' ') {
    var unSelectedData= dataset.filter(function(index, item) {
      return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
    })
    }
    if (unSelectedData) {
      unSelectedData.hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='selectField'>
  <option value=" "> Show All </option>
  <option value="Done"> Done </option>
  <option value="On-going"> On-going</option>
  <option value="Not yet started"> Not yet started </option>
</select>

<table border="2">


  <tr>
    <td>Done</td>
  </tr>
  <tr>
    <td>On-going</td>
  </tr>
  <tr>
    <td>Done</td>
  </tr>
  <tr>
    <td>Not yet started</td>
  </tr>
  <tr>
    <td>Not yet started</td>
  </tr>

</table>

Question 2

The solution is to avoid search action when selection is same value as “Show all” option which is ” “

I’ve updated the jQuery code as below, and it works :

$(document).ready(function($) {
  $('#selectField').change(function() {
    var selection = $(this).val();
    var dataset = $('table').find('tr');
    dataset.show();
    dataset.filter(function(index, item) {
      if (selection !== ' ') {
        return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
      }
    }).hide();
  });
});

Question 3

I’m using a code that I also found here that filters a table based on a dropdown selection. I’m not well-versed with JQuery/Javascript. My Question is how can I “show all” the data using this code snippet:

dropdown:

Show All
Done
On-going
Not yet started

$(document).ready(function($) {
  $('#selectField').change(function() {
    var selection = $(this).val();
    var dataset = $('table').find('tr');
    dataset.show();
    dataset.filter(function(index, item) {
      return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
    }).hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='selectField'>
  <option value=" "> Show All </option>
  <option value="Done"> Done </option>
  <option value="On-going"> On-going</option>
  <option value="Not yet started"> Not yet started </option>
</select>

<table border="2">


  <tr>
    <td>Done</td>
  </tr>
  <tr>
    <td>On-going</td>
  </tr>
  <tr>
    <td>Done</td>
  </tr>
  <tr>
    <td>Not yet started</td>
  </tr>
  <tr>
    <td>Not yet started</td>
  </tr>

</table>

Bollate

[ANSWERED] javascript – Jquery dropdown filter for tables

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by Akhil Aravind

Comment posted by cookeemonster27

By

Related Post

[ANSWERED] python – Extract text from a class in HTML using CSS language

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate