jQuery Filter Data in table

Question

I have a table of data on my page and then a couple of buttons that the user can click on. Depending on which button is clicked, it will show/hide rows in the table which match the criteria of the button clicked.

Below you will see my HTML table as well as the switch statement that is triggered when the button is clicked.

My table contains data in the tr class with the criteria which are regions. If a user wants to see only results that impact the EMEA region, they can click on the EMEA button. When they do click EMEA, it will hide all table rows where EMEA is not found in the tr class.

The two statements I am having trouble with are global and multiple.

If global is selected, all 3 regions must be in the class. If multiple is selected, at least two of the regions needs to be in the class.

Any thoughts?

// Here is my table of data
<table class="res">
   <thead>
     <tr>
       <td>Blah</td>
     </tr>
   </thead>
   <tbody class="results">
     <tr class="EMEA APAC">
       <td>I Impact Two Regions (Multiple)</td>
     </tr>
     <tr class="EMEA">
       <td>I Impact One Region (EMEA)</td>
     </tr>
     <tr class="EMEA APAC AMERICAS">
       <td>I Impact All Regions (Global)</td>
     </tr>
   </tbody>
</table>

...
Buttons on the page trigger the below switch statement
...

// When clicking on the filter button such as "Multiple, Global, or EMEA"    
switch (type) {
    case 'global':
          // If we impact all 3 regions..
          $('.res').find('.results tr').each(function() {
             // If this row doesn't have all 3 regions, we hide it
          });
        break;
    case 'multiple':
         // If we impact any combination of two regions
         $('.res').find('.results tr').each(function() {
             // If this row doesn't have a combination of any two regions, we hide it
         });
        break;
    case 'EMEA':
        // If we impact EMEA
        $('.res').find('.results tr').each(function() {
           // If this row doesn't have only the EMEA region, we hide it
        });
        break;
}

Answer 1

switch (type) {
     case 'global':
      // If we impact all 3 regions..
      $('.res').find('.results tr').each(function() {
         // If this row doesn't have all 3 regions, we hide it

 //classes is an array of all the classes applied to the element
         var classes = $(this).attr('class').split(/\s+/);

         if(!(classes.indexOf('EMEA')>-1 && classes.indexOf('APAC')>-1 && classes.indexOf('AMERICAS')>-1))
        {
          $(this).hide();
        }

      });
    break;
    case 'multiple':
     // If we impact any combination of two regions
     $('.res').find('.results tr').each(function() {
         // If this row doesn't have a combination of any two regions, we hide it

        var classes = $(this).attr('class').split(/\s+/);

         if(!($.unique(classes).length>1))
        {
          $(this).hide();
        }

     });
    break;
    case 'EMEA':
    // If we impact EMEA
    $('.res').find('.results tr').each(function() {
       // If this row doesn't have only the EMEA region, we hide it

      var classes = $(this).attr('class').split(/\s+/);

         if(!(classes.indexOf('EMEA')>-1))
        {
          $(this).hide();
        }

    });
    break;
}