Javascript 具有多个筛选器的筛选表

我有以下javascript，它接受表单元素的输入，并隐藏不符合搜索条件的表行

<script>
    function wo_search(filter, column) {
        // Declare variables 
        var input, table, tr, td, i;
        input = document.getElementById("wo_search_type");
        table = document.getElementById("work_order");
        tr = table.getElementsByTagName("tr");

        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[column];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>

功能wo_搜索（过滤器、列）{
//声明变量
var输入，表，tr，td，i；
输入=document.getElementById（“wo_搜索类型”）；
表=document.getElementById（“工单”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
}

问题是，我的表有7个搜索词，而不仅仅是一个。在我当前的代码中，一次只能使用一个过滤器。当选择一个过滤器时，它将在表中隐藏正确的元素。一旦用户选择了第二个过滤器，第一个过滤器就会失效，在应用所选第二个术语的过滤器之前，基本上该过滤器隐藏的所有数据都会再次显示

如何使所有过滤器一起应用

附言

这就是根据输入类型调用filter函数的方式，有常规文本输入和选择框

选择框使用

onchange=“wo_search（this.value.toUpperCase（），0）”

，第二个参数是表列id

输入文本使用

onkeyup=“wo_search（this.value.toUpperCase（），0）”

，第二个参数是表列id

编辑： 我不认为我在最初的帖子中说得很清楚，对此我深表歉意，但我正在尝试为7种不同的输入设置表过滤器

基本上，在表的最顶端（标题上方）有一行，其中只包含一个输入框（选择或文本输入），需要过滤表中的特定列

---

每个列都有自己的筛选器。以下是一个屏幕截图：

---

我认为使用jquery可能更容易做到这一点，因此jquery答案也很受欢迎。

在讨论了我的原始答案后，下面是我得到的答案。请检查一下这是否是您需要的

编辑 我忘了将正在测试的文本按过滤器的大小写，这导致了一些令人毛骨悚然的结果

document.addEventListener（'DOMContentLoaded'，function（）{
var过滤器=[]；
//电流滤波器阵列；
var table_data=document.querySelectorAll（'filter me tbody tr'）；
//获取筛选器me表中的所有表行
//将事件侦听器添加到筛选器列表元素
document.querySelector（“#过滤器列表”）.addEventListener（'click'，函数（e）{
如果（！e.target.classList.contains（'filter-item'））返回false；
var index=parseInt（e.target.getAttribute（'data-index'）；
过滤器.拼接（索引1）；
更新_过滤器（）；
运行_过滤器（）；
})
函数值_变化（第e列）{
var action=false；
//尚未运行任何操作
如果（e.type=='keypress'）{
//如果动作类型为按键，请检查是否按了enter键，并且该值不是空的
如果（e.keyCode==13&&this.value！=''）{
过滤器。推({
专栏：专栏，
筛选器：this.value.toLowerCase（）
});
//重置该值
这个值=“”；
//我们通过这次活动做了一些事情，因此我们必须采取行动
行动=正确；
}
}else if（e.type='change'）{
//如果事件是change，只需按下列索引+此select的值
过滤器。推({
专栏：专栏，
筛选器：this.value.toLowerCase（）
});
//同样，行动是正确的
行动=正确；
}
如果（行动）{
//因为我们有操作，所以我们需要更新过滤器列表并针对表运行过滤器。
更新_过滤器（）；
运行_过滤器（）；
}
}
//这条线有点乱：
//创建一个空数组，调用其上的slice方法，将其绑定到document.querySelectorAll（'.column filter'）节点列表对象
//使用实际的DOM节点本身+它的索引遍历每个节点
[].slice.call（document.querySelectorAll（'.column filter'））.forEach（（filter，i）=>{
filter.addEventListener（filter.tagName.toLowerCase（）='input'？'keypress'：'change'，value_change.bind（filter，i））；
//将事件侦听器添加到正确的类型——您可能希望更精确地确定添加了哪个事件，具体取决于您在此事件上的情况
//将value_change函数绑定到元素，但将第一个元素作为索引从节点列表的元素传递。
});
函数更新_过滤器（）{
document.querySelector（“#过滤器列表”）.innerHTML=“”；
//移除所有元素；
var els=filters.map（（filter，i）=>“”+filter.filter+“”）；
//在此处创建一个假跨度项目
document.querySelector（“#过滤器列表”）.innerHTML=els.join（“”）；
//用一个空格连接所有内容，并将innerHTML设置为结果
}//结束更新\u筛选器
函数run_filters（）{
对于（变量i=0，行，tds；行=表_数据[i]；i++）{
//只获取TD元素
tds=行。querySelectorAll（'td'）；
//为了运行一行，每个筛选器必须匹配。
var pass=过滤器。每个（过滤器=>{
返回tds[filter.column].innerText.toLowerCase（）.indexOf（filter.filter）！=-1；
//要使筛选器匹配，相应列中的TD元素必须包含文本
});
row.style.display=通过？“”：“无”；//如果通过，则不添加任何显示样式；否则，将其隐藏。
}
}//结束运行\u过滤器
});
#过滤器列表{
显示：内联块；
}
#过滤器列表span.filter-item{
显示：内联块；
背景色：浅绿色；
填充：3px6px；
光标：指针；
}
#过滤器列表span.filter-ite