缩放 Javascript 过滤器

Question

我正在构建一个包含多个过滤器的表。到目前为止，我已经能够构建两个协同工作的过滤器。过滤器值来自这样的下拉列表（我还没有将“组织类型”作为过滤器包括在内：

这是我的代码：

    function filterTable_all() {
            filter = []
            // get filter 1 values and push to array
            var input = document.getElementById("KCPWinner");
            var values = getSelectValues(input);
            filter.push(values.toString().toUpperCase().split(","));
            // get filter 2 values and push to array
            var input = document.getElementById("yearFounded");
            var values = getSelectValues(input);
            filter.push(values.toString().toUpperCase().split(","));
            // get table
            var table = document.getElementById("mytableID");
            var tr = table.getElementsByTagName("tr");
            // loop through rows for filtering
            for (var i = 1; i < tr.length; i++) {
                for (var j = 0; j < filter.length; j++) {
                   // if neither both filters are selected
                    if (filter[0] != "" && filter[1] != "") {
                        if (filter[0].includes(tr[i].children[5].textContent.toUpperCase().trim()) && filter[1].includes(tr[i].children[4].textContent.toUpperCase().trim())){
                        tr[i].style.display = "block";
                    }
                    
                    } // if one filter is selected
                    else if (filter[0] != "" && filter[1] == "") {
                        if (filter[0].includes(tr[i].children[5].textContent.toUpperCase().trim())){
                        tr[i].style.display = "block";
                    }

                    } // if the other filter is selected
                    else if (filter[0] == "" && filter[1] != "") {
                        if (filter[1].includes(tr[i].children[4].textContent.toUpperCase().trim())) {
                            tr[i].style.display = "block";
                        }
                    }
                }
                if (tr[i].style.display == "block") {
                    tr[i].style.display = "flex";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }

基本上，我正在获取用户选择的值，并确定是否应该显示该值。此逻辑适用于两个过滤器。

不过，我的做法好像不太好扩展。我想再添加几个过滤器，但每个过滤器都会成倍地增加 if 语句。关于如何扩展此过滤器逻辑的任何想法？

这些是触发 filterTable_all() 函数的选择按钮（使用 Django）：

<select class="submarket" style="" onchange='filterTable_all()' multiple name="yearFounded" id="yearFounded">
                  {% for year in filter_options.year_founded %}
                      {% if year|toStr in liveFilters.year_founded %}
                    <option class="submarketText checkedClass" value="{{ year }}" selected>{{ year }}</option>
                      {% else %}
                    <option class="submarketText" value="{{ year }}">{{ year }}</option>
                      {% endif %}
              {% endfor %}
              </select>

编辑：这都是前端JS过滤

Answer 1

据我了解，您正在尝试检查表中的元素是否满足过滤器的所有要求。

循环遍历元素，然后为每个元素循环遍历过滤器，如果过滤器中不包含元素，则将显示设置为无并中断循环。

如果我误解了什么，请告诉我，因为代码中没有注释有点难。

下面是演示代码实现： *** 不是完整的代码 ***

filters = [];
// populate filters with filter.push()
// get your table elements --> tr = []

tr.forEach((element) => {
    element.style.display = "block";
    filters.forEach((filter) => {
        if (filter.includes(element) { // might need to refine this with trim and upper case methods
            element.style.display = "none";
            break;
        }
    });
});