Filter table rows based on select value

问题:

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 complete 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.

回答1:

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 taht 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.com/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>

回答2:

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();
                       }
                   });
           }); 

回答3:

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();
          }
        }
      });
    });
});

回答4:

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.com/contains-selector/