表格中的jQuery过滤数据

Question

我的页面上有一个数据表，然后有几个用户可以单击的按钮。 根据所单击的按钮，它将显示/隐藏表中与所单击按钮的条件匹配的行。

在下面，您将看到我的HTML表以及单击该按钮时触发的switch语句。

我的表包含tr类中的数据，条件是区域。 如果用户只想查看影响EMEA地区的结果，则可以单击EMEA按钮。 当他们单击EMEA ，它将隐藏tr类中未找到EMEA所有表行。

我遇到的两个问题是global和multiple 。

如果选择了global ，则所有3个区域都必须在该类中。 如果选择了multiple ，则类别中至少需要两个区域。

有什么想法吗？

// 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;
}