Question

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

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

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

我遇到问题的两个陈述是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;
}

jQuery过滤数据在表中

1 个答案: