I need to filter table rows based on select value. When selected value is "" (empty) table must be hidden. If select value is lets say 1, table must be visible and it must show only rows where first table column hold value 1.

The problem is that this id column hold multiple ids like 1,2. Since my JQuery skill are not the best i need you guys to help me plete my code

My selector

<select id='mySelector'>
   <option value="">Please Select</option>
   <option value='1'>A</option>
   <option value='2'>B</option>
   <option value='3'>C</option>
</select>

My table

<table id='myTable'>
   <thead>
      <tr>
         <th>ids</th>
         <th>name</th>
         <th>address</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1,2</td>
         <td>Jhon</td>
         <td>Doe</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Mike</td>
         <td>Poet</td>
      </tr>
      <tr>
         <td>2,3</td>
         <td>Ace</td>
         <td>Ventura</td>
      </tr>
   </tbody>
 </table>

My script

$(document).ready(function($) {
    $('table').hide();
    $('#mySelector').change( function(){
      $('table').show();
      var selection = $(this).val();
      var dataset = $('#myTable').find('tr');
          $.each(dataset, function(index, item) {
            //help
          });
    });
});

And here is working plunker

If you need any additional information, please let me know and I will provide. Thank you in advance.

I need to filter table rows based on select value. When selected value is "" (empty) table must be hidden. If select value is lets say 1, table must be visible and it must show only rows where first table column hold value 1.

The problem is that this id column hold multiple ids like 1,2. Since my JQuery skill are not the best i need you guys to help me plete my code

My selector

<select id='mySelector'>
   <option value="">Please Select</option>
   <option value='1'>A</option>
   <option value='2'>B</option>
   <option value='3'>C</option>
</select>

My table

<table id='myTable'>
   <thead>
      <tr>
         <th>ids</th>
         <th>name</th>
         <th>address</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1,2</td>
         <td>Jhon</td>
         <td>Doe</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Mike</td>
         <td>Poet</td>
      </tr>
      <tr>
         <td>2,3</td>
         <td>Ace</td>
         <td>Ventura</td>
      </tr>
   </tbody>
 </table>

My script

$(document).ready(function($) {
    $('table').hide();
    $('#mySelector').change( function(){
      $('table').show();
      var selection = $(this).val();
      var dataset = $('#myTable').find('tr');
          $.each(dataset, function(index, item) {
            //help
          });
    });
});

And here is working plunker

If you need any additional information, please let me know and I will provide. Thank you in advance.

• javascript
• jquery
• html
• arrays
• jquery-selectors

• Do you have control of the markup? Could you change the table markup, for example? This would be FAR simpler if you could add some attributes to the markup: <tr data-id="[2,3]"> for example. – random_user_name Commented Jan 9, 2017 at 18:08
• yes i have control of markups – Valor_ Commented Jan 9, 2017 at 18:08

4 Answers 4

You can filter the row based on the content of the td that contains the ids:

1. Your dataset must be $('#myTable tbody').find('tr') so that it does not show / hide the thead

2. First show all the table trs using dataset.show()

3. Now filter the trs that you don't need to be shown using this:

   dataset.filter(function(index, item) {
     return $(item).find('td:first-child').text().split(',').indexOf(selection) === -1;
   }).hide();
   

See demo below:

$(document).ready(function($) {
  $('table').hide();
  $('#mySelector').change(function() {
    $('table').show();
    var selection = $(this).val();
    var dataset = $('#myTable tbody').find('tr');
    // show all rows first
    dataset.show();
    // filter the rows that should be hidden
    dataset.filter(function(index, item) {
      return $(item).find('td:first-child').text().split(',').indexOf(selection) === -1;
    }).hide();

  });
});

/* Styles go here */

table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.styled-select.slate {
  height: 34px;
  width: 240px;
}

<script src="https://code.jquery./jquery-2.2.4.js"></script>
<script src="script.js"></script>

<select id='mySelector' class="styled-select slate">
  <option value="">Please Select</option>
  <option value='1'>A</option>
  <option value='2'>B</option>
  <option value='3'>C</option>
</select>
<br>
<br>
<br>
<table id='myTable'>
  <thead>
    <tr>
      <th>ids</th>
      <th>name</th>
      <th>address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1,2</td>
      <td>Jhon</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mike</td>
      <td>Poet</td>
    </tr>
    <tr>
      <td>2,3</td>
      <td>Ace</td>
      <td>Ventura</td>
    </tr>
  </tbody>
</table>

Short solution using :contains() selector:

$(document).ready(function($) {
    $('table').hide();

    $('#mySelector').change( function(){
      var selection = $(this).val();
      $('table')[selection? 'show' : 'hide']();

      if (selection) {  // iterate only if `selection` is not empty
        $.each($('#myTable tbody tr'), function(index, item) {
          $(item)[$(item).is(':contains('+ selection  +')')? 'show' : 'hide']();
        });
      }

    });
});

Test link: https://plnkr.co/edit/zNQNFVBIPSyPjEyU7I1J?p=preview

http://api.jquery./contains-selector/

Try using below code

$("#mySelector").on("change",
           function(){
               var a = $(this).find("option:selected").html();

               $("table tr td:first-child").each(
                   function(){
                       if($(this).html() != a){
                           $(this).parent().hide();
                       }
                       else{
                           $(this).parent().show();
                       }
                   });
           }); 

Here is a solution which you can test here

$(function() {
    $('table').hide();
    $('#mySelector').change( function(){
      $('table').show();
      var selection = $(this).val();
      var dataset = $('#myTable').find('tr');

      dataset.each(function(index) {
        item = $(this);
        item.hide();

        var firstTd = item.find('td:first-child');
        var text = firstTd.text();
        var ids = text.split(',');

        for (var i = 0; i < ids.length; i++)
        {
            if (ids[i] == selection)
          {
            item.show();
          }
        }
      });
    });
});