表格中的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;
}