Question

我有一个表可以通过多个复选框以及“选择”下拉列表进行过滤。基本上，我希望能够做的是单击多个复选框，以便找到包含该类的每一行，所以类1和3或示例，然后按位置过滤它。

我已经非常接近这一点，在那里我可以选择位置（也是一个类，两个字母用于州缩写），以及复选框中的单个类，但我希望人们能够比较复选框中的多个类。

问题是我理解的，但似乎无法弄清楚如何修复。代码将每个类添加到“tr”的末尾。这意味着如果您从复选框中应用2个过滤器，它什么也找不到，而不是从每个过滤器中找到所有内容。虽然这个行为对于1个复选框和Dropdown非常有用，这意味着它只会给我Tennessee的Filter 1值，我希望它能够同时给我Filter 2，Filter 3和Filter 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

如何添加到我的表格过滤器以允许多个复选框选择，以及从下拉列表中过滤？

1 个答案: