HTML表格过滤器不过滤多个过滤器答案

【问题标题】：HTML table filters not filtering multiple filtersHTML表格过滤器不过滤多个过滤器
【发布时间】：2017-05-19 08:36:26
【问题描述】：

过滤器仅作为单独的过滤器正常工作，即如果用户在“包”中过滤，它将根据需要进行过滤，或者如果用户过滤“Nights”，它将根据需要进行过滤。

如果用户想通过两个或多个过滤器进行过滤，而不是返回正确的结果，它将只返回最后过滤的结果即，如果用户按 Package:Silver 和 Nights:3 过滤，它应该返回四个结果，而不是 12。

要求是根据用户选择的所有过滤器返回准确的结果。

's 来自第 65 - 67 行，而 the 来自第 2243 - 2292 行。

如果“人数”输入是具有值 1, 2, 3, 4 的下拉表单，那将是一个奖励，但目前这不是必需的。

代码太大无法粘贴，见链接Table 1

【问题讨论】：

标签： html filtering

【解决方案1】：

您可能想将 3 个函数合并为 1 个，因为它们看起来几乎相同。

function filter() {
    var filter_package    = document.getElementById("myInput").value.toUpperCase().trim();
    var filter_num_nights = document.getElementById("myInput1").value.toUpperCase().trim();
    var filter_num_people = document.getElementById("myInput2").value.toUpperCase().trim();

    var rows = document.querySelectorAll("tr");

    // First few rows are headers
    for (var i = 2; i < rows.length; i++) {
        var items = rows[i].querySelectorAll("td");
        if (items.length === 0) continue;

        var pkg = items[0];
        var night = items[1];
        var people = items[2];

        var package_text = pkg.innerHTML.toUpperCase().trim();
        var night_text = night.innerHTML.toUpperCase().trim();
        var people_text = people.innerHTML.toUpperCase().trim();

        if (package_text.includes(filter_package) &&
            night_text.includes(filter_num_nights) &&
            people_text.includes(filter_num_people)) {
            rows[i].style.display = "";
        } else {
            rows[i].style.display = "none";
        }
    }
}

并修改输入框的keyup事件，如下所示：

<input type="text" id="myInput" onkeyup="filter()" placeholder="Search for Packages.." title="Type in a Package name">
<input type="text" id="myInput1" onkeyup="filter()" placeholder="Search for Number of Nights.." title="Type in Number of Nights">
<input type="text" id="myInput2" onkeyup="filter()" placeholder="Search for Number of People.." title="Type in Number of People">

请注意

如果您的浏览器不支持 string.includes 天真，那么您可以将以下 polyfill 复制并粘贴到您的 javascript 代码中。（参考：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/includes）：

if (!String.prototype.includes) {
  String.prototype.includes = function(search, start) {
    'use strict';
    if (typeof start !== 'number') {
      start = 0;
    }

    if (start + search.length > this.length) {
      return false;
    } else {
      return this.indexOf(search, start) !== -1;
    }
  };
}

【讨论】：