使用jQuery从多个select元素中过滤表格

Question

我想根据用户从多个select元素中选择的内容，使用jQuery hide/show过滤表格。

我希望用户能够从1,2或3个选择元素中选择多个值。所以也许他们会选择2名培训师，1名招聘人员和1名身份，或者只选一名培训师。规划创建一个在用户点击任何选项时运行的函数。

我看到它的方式，每个select元素都会有一个用户选择的值的数组。所以我需要遍历每个数组并将其与特定列中的文本进行比较。如果选项仅来自1个选择元素，将会很容易。但是因为它可能是1,2或3，所以我很难找到它。

任何帮助将非常感激。

表：

<table id="reportsTable"> 
    <thead> 
    <th>Report Number</th> 
    <th>Date</th> 
    <th>Name</th> 
    <th>Trainer</th> 
    <th>Status</th> 
    </thead> 
    <tbody> 
    <tr> 
     <td>12345-1</td> 
     <td>05/01/2011</td> 
     <td>First Recruit</td> 
     <td>First Trainer</td> 
     <td>Complete</td> 
    </tr> 
    <tr> 
     <td>12345-2</td> 
     <td>05/02/2011</td> 
     <td>First Recruit</td> 
     <td>Second Trainer</td> 
     <td>In Progress</td> 
    </tr> 
    <tr> 
     <td>54321-1</td> 
     <td>05/03/2011</td> 
     <td>Second Recruit</td> 
     <td>First Trainer</td> 
     <td>Created</td> 
    </tr> 
    </tbody> 
</table> 

选择：

<select multiple="multiple" name="trainerFilter"> 
    <option value="firsttrainer">First Trainer</option> 
    <option value="secondtrainer">Second Trainer</option> 
</select> 
<select multiple="multiple" name="recruitFilter"> 
    <option value="firstrecruit">First Recruit</option> 
    <option value="secondrecruit">Second Recruit</option> 
</select> 
<select multiple="multiple" name="statusFilter"> 
    <option value="created">Created</option> 
    <option value="inprogress">In Progress</option> 
    <option value="complete">Complete</option> 
</select> 

看起来我不能回答张贴到我的问题8小时，但是这是我想出了感谢@Spencer Ruport 。由于必须考虑所有可能的条目，最终结果比我预期的要复杂得多。用户可以从第一个选择元素中选择一些，第二个中没有任何东西，第二个中可能有两个。或者，也许用户不会从第一个和第2个中选择任何内容。对于任何给定的输入，可能有6个以上的滤波器比需要应用。

我确定有比这更好的方法，它看起来像@Alison可能已经链接到一个，但它的工作原理。

function filterReports() { 
     $('.report').hide(); //Set all rows to hidden. 
     trainerVals = $('#trainerFilter').val(); 
     recruitVals = $('#recruitFilter').val(); 
     statusVals = $('#statusFilter').val(); 
     if (trainerVals) { //Check if any trainers are selected. 
      $.each(trainerVals, function(index, trainer) { 
       filtered = false; 
       classString = ''; 
       classString += '.' + trainer; 
       if (recruitVals) { //Check if trainers and recruits are selected. 
        $.each(recruitVals, function(index, recruit) { 
         filtered = false; 
         secondString = ''; 
         secondString = classString + '.' + recruit; //Concat to a new string so we keep the old one intact. 
         if (statusVals) { //Check if trainers, recruits and statuses are selected. 
          $.each(statusVals, function(index, status) { 
           filtered = false; 
           finalString = ''; 
           finalString += secondString + '.' + status; //Again concat to a new string. 
           $(finalString).show(); 
           filtered = true; //By setting filtered to true, we only run the show once. 
          }); 
         } 
         if (!filtered) { //If trainers and recruits are selected, but not a status, we need to apply that filter. 
          $(secondString).show(); 
          filtered = true; 
         } 
        }); 
       } 
       if (!filtered && statusVals) { //If only trainers and statuses are selected, go through those. 
        $.each(statusVals, function(index, status) { 
         filtered = false; 
         finalString = ''; 
         finalString += classString + '.' + status; 
         $(finalString).show(); 
         filtered = true; 
        }); 
       } 
       if (!filtered) { //If only trainers are selected, apply that filter. 
        $(classString).show(); 
        filtered = true; 
       } 
      }); 
     } 
     if (!filtered && recruitVals) { //If trainers are not selected, by recruits are, run through the recruits. 
      $.each(recruitVals, function(index, recruit) { 
       classString = ''; 
       classString += '.' + recruit; 
       if (statusVals) { //Check if recruits and statuses are selected 
        $.each(statusVals, function(index, status) { 
         finalString = ''; 
         finalString += classString + '.' + status; 
         $(finalString).show(); 
         filtered = true; 
        }); 
       } 
       if (!filtered) { //If only recruits are selected, apply that filter. 
        $(classString).show(); 
        filtered = true; 
       } 
      }); 
     } 
     if (!filtered && statusVals) { //If both trainers and recruits are not selected, but statuses are, run through those. 
      $.each(statusVals, function(index, status) { 
       classString = ''; 
       classString += '.' + status; 
       $(classString).show(); 
       filtered = true; 
      }); 
     } 
     if (!filtered) { 
      //No filters selected. 
     } 
     $("tr").removeClass("even"); //Remove current zebra striping. 
     $("tr:visible:even").addClass("even"); //Add zebra striping only for rows that are visible. 
    } 

Answer 1

这是非常简单的使用多个类来完成（我通常称他们为标志的时候会不会被用于他们的风格。）

<table> 
    <thead> 
    <th>Report Number</th> 
    <th>Date</th> 
    <th>Name</th> 
    <th>Trainer</th> 
    <th>Status</th> 
    </thead> 
    <tbody> 
    <tr class="obj_first_recruit obj_first_trainer obj_complete obj_row_item"> 
     <td>12345-1</td> 
     <td>05/01/2011</td> 
     <td>First Recruit</td> 
     <td>First Trainer</td> 
     <td>Complete</td> 
    </tr> 
    <tr class="obj_first_recruit obj_second_trainer obj_in_progress obj_row_item"> 
     <td>12345-2</td> 
     <td>05/02/2011</td> 
     <td>First Recruit</td> 
     <td>Second Trainer</td> 
     <td>In Progress</td> 
    </tr> 
    <tr class="obj_second_recruit obj_first_trainer obj_created obj_row_item"> 
     <td>54321-1</td> 
     <td>05/03/2011</td> 
     <td>Second Recruit</td> 
     <td>First Trainer</td> 
     <td>Created</td> 
    </tr> 
    </tbody> 
</table> 

然后，只要你愿意，只过滤串接所有相应的标志物，例如时期：

$(".obj_row_item").hide(); 
$(".obj_first_recruit.obj_second_trainer.obj_in_progress").show(); 

为了简单起见，你可以使下拉菜单的值对应于标记名称让你的声明看起来是LIK e：

$("." + $("#dropdown1").val() + "." + $("#dropdown2").val() + "." + $("#dropdown3").val()).show(); 

Answer 2

看看jQuery Datatables plug-in。它使操纵HTML表格变得简单。通过一些简单的设置更改，你可以很容易做到，你在找什么（多）

请一定要检查出filtering using select elements