我有一个可以通过多个复选框以及“选择”下拉列表进行过滤的表格。本质上,我想要做的是单击多个复选框,以便找到包含该类(例如类 1 和 3)的每一行,然后按位置对其进行过滤。
此时我已经非常接近了,我可以从复选框中选择位置(这也是一个类,两个字母表示州缩写)和一个类,但我希望人们能够比较多个类从复选框中。
这个问题是我理解的,但似乎不知道如何解决。该代码将每个类添加到“tr”的末尾。这意味着如果您从复选框应用 2 个过滤器,它什么也找不到,而不是从每个过滤器中找到所有内容。虽然此行为对于 1 个复选框和下拉列表来说功能完美,这意味着它只会为我提供来自田纳西州的筛选器 1 值,但我希望它能够同时为我提供筛选器 2、筛选器 3 和筛选器 4,如果我所以选择。
关于如何改变它以使其允许多个复选框选择有什么想法吗?
顺便说一句,我可以使用的 JavaScript/jQuery 插件非常有限,这就是为什么我如此努力地在这个解决方案中使用 tableSorter。
My 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();
}
}
});