使用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