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

Question

我想根据用户从多个选择元素中选择的内容使用 jQuery 隐藏/显示来过滤表格。

我希望用户能够从 1、2 或 3 个选择元素中选择多个值。因此，他们可能会选择 2 名培训师、1 名新兵和 1 名状态人员，或者可能只选择 1 名培训师。计划创建一个在用户单击任何选项时运行的函数。

在我看来，每个选择元素都会有一个用户选择的值数组。因此，我需要循环遍历每个数组并将其与特定列中的文本进行比较。如果选项仅来自 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

看一下 jQuery Datatables 插件。它使操作 HTML 表格变得轻而易举。通过一些简单的设置更改，您可以轻松地执行您想要的操作（以及更多操作）。

请务必查看 使用选择元素进行过滤

Answer 2

使用多个类可以非常简单地做到这一点（当它们不用于样式时，我通常将它们称为标记。）

<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();

为了简单起见，您可以将下拉列表的值对应于标记名称，使您的语句看起来像这样：

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