如何添加到我的表格過濾器以允許多個複選框選擇，以及從下拉列表中過濾？

Question

我有一張表格可以通過多個複選框以及「選擇」下拉菜單進行過濾。從本質上講，我希望能夠做到的是點擊多個複選框，以查找包含該類的每一行，例如類1和3或示例，然後按位置對其進行過濾。

我已經非常接近了，在這裏我可以選擇位置（這也是一個類，兩個字母的狀態縮寫），以及複選框中的單個類，但我希望人們能夠比較複選框中的多個類。

這個問題是我明白，但似乎無法弄清楚如何解決。代碼將每個類添加到「tr」的末尾。這意味着，如果您從複選框應用2個過濾器，它什麼也找不到，而不是從每個過濾器中找到所有內容。雖然這種行爲對於1複選框和下拉菜單是完全有效的，這意味着它只會給我從田納西州的過濾器1值，但我希望它能夠同時給我過濾器2，過濾器3和過濾器4，如果我所以選擇。

有關如何更改此選項以使其允許多個複選框選擇的任何想法？

順便說一句，我非常有限的JavaScript/jQuery插件我可以使用，這就是爲什麼我很努力地使用tableSorter這個解決方案。

我的HTML：

<form name="FilterForm" id="FilterForm" action="" method=""> 
    <input type="checkbox" name="filterStatus" value="1" /><label for="filter_1">Filter 1</label> 
    <input type="checkbox" name="filterStatus" value="2" /><label for="filter_2">Filter 2</label> 
    <input type="checkbox" name="filterStatus" value="3" /><label for="filter_3">Filter 3</label> 
    <input type="checkbox" name="filterStatus" value="4" /><label for="filter_4">Filter 4</label> 
    <select type="dropdown" name="filterStatus" id="chooseState" class="filter"> 
     <option value="ZZ">--Choose State--</option> 
     <option value="TN">Tennessee</option> 
     <option value="MO">Missouri</option> 
     <option value="NV">Nevada</option> 
     <option value="IA">Iowa</option> 
    </select><label>State</label> 
     </form> 

<table id="StatusTable"> 
    <tbody>       
     <tr class="1 TN"> 
     <td class="Name"></td> 
     <td class="ID"></td> 
     <td class="Type"></td> 
     <td class="Location">City, Tennessee</td> 
     <td class="Class"></td> 
     <td class="Received"></td> 
     <td class="Action"></td> 
     <td class="Status">Active</td> 
    </tr> 
</tbody> 
</table> 

的JavaScript：

$("input[name='filterStatus'], select.filter").change(function() { 
var classes = ""; 
var stateClass = "" 

    $("input[name='filterStatus']").each(function() { 
    if ($(this).is(":checked")) { 
    classes += "." + $(this).val(); 
    } 
}); 

$("select.filter").each(function() { 
if ($(this).val() != 'ZZ') { 
stateClass += "." + $(this).val(); 
} 
}); 

if (classes == "" && stateClass == "") { 
// if no filters selected, show all items 
$("#StatusTable tbody tr").show(); 
} else { 
// otherwise, hide everything... 
$("#StatusTable tbody tr").hide(); 

    // then show only the matching items 
rows = $("#StatusTable tr" + classes + stateClass); 
if (rows.size() > 0) { 
rows.show(); 
} 
} 

}); 

Answer 1

你既然知道了問題，不適跳過解釋，並跳轉到該解決方案。使用.filter()方法與數組混合。

而是花費一個字符串，推類名到一個數組：

var classes = []; 

$("input[name='filterStatus']").each(function() { 
    if ($(this).is(":checked")) { 
     classes.push('.'+$(this).val()); 
    } 
}); 

然後選擇行的時候，用.filter()就像這樣：

rows = $("#StatusTable tr" + stateClass).filter(classes.length ? classes.join(',') : '*') 

然後一切工作正常！

Fiddle