Javascript 表按5个单独的输入块进行过滤

我一直在尝试用javascript编写一个函数，这样我就可以通过5个单独的输入框过滤一个表，每个输入框对应一个表的参数。W3schools有一个解决方案，但它只涵盖了一个专栏；我在这里找到了一大堆关于“如何通过多个输入框过滤表格”的其他答案，但它们要么不起作用，要么另一个框会覆盖过滤过程，例如，如果我在第一框中写“x”，在第二框中写“y”，表格将必须包含列中包含的每个“y”，即使是没有“x”的。有什么解决办法吗？（第六栏没有添加任何内容，这意味着要保持这种状态）

html

<input type="text" id="inid" onkeyup="search()" placeholder="ID">
<input type="text" id="inplat" onkeyup="search()" placeholder="Platform">
<input type="text" id="inloc" onkeyup="search()" placeholder="Location">
<input type="text" id="incount" onkeyup="search()" placeholder="T-Count">
<input type="text" id="inauthor" onkeyup="search()" placeholder="Author">

<div id="table_div">
        <table id="myTable">
            <tr class="header">
                <th>ID</th>
                <th>Platform</th>
                <th>Location</th>
                <th>T-Count</th>
                <th>Author</th>
                <th></th>
            </tr>
            <tr>
                <td>2-12-8374857-232</td>
                <td>PC</td>
                <td>Chongqing</td>
                <td>4</td>
                <td>Urben</td>
                <td>More Info</td>
            </tr>
            <tr>
                <td>3-23-3939473-324</td>
                <td>PS</td>
                <td>Dubai</td>
                <td>3</td>
                <td>Hichkas</td>
                <td>More Info</td>
            </tr>
            <tr>
                <td>3-43-3245235-432</td>
                <td>Xbox</td>
                <td>Paris</td>
                <td>2</td>
                <td>TheChicken</td>
                <td>More Info</td>
            </tr>
            <tr>
                <td>1-24-2594549-124</td>
                <td>Stadia</td>
                <td>Berlin</td>
                <td>5</td>
                <td>Scat1620</td>
                <td>More Info</td>
            </tr>
        </table>
    </div>

身份证件
站台
位置
T-计数
作者
2-12-8374857-232
个人计算机
重庆
4.
乌本
更多信息
3-23-3939473-324
附言
迪拜
3.
希卡斯
更多信息
3-43-3245235-432
Xbox
巴黎
2.
芝加哥
更多信息
1-24-2594549-124
视场
柏林
5.
第1620页
更多信息

这是我给你的建议

它使用了一些增强的JS技巧

//在块内执行所有操作以避免与全局命名空间冲突
{
“严格使用”；
//定义一些神奇的值
常量formSelector='[data filter table target]'
常量列选择器=“[数据列]”
常量行选择器='：范围>tbody>tr'；
常量filteredClassName='filtered'；
//定义只做一件事的小助手函数
//返回与数据筛选器表目标参数中的选择器匹配的HTML元素
const getTarget=form=>document.querySelector（form.dataset.filterTableTarget）
//从该表的正文中获取所有第一类行（即未嵌套在表中）
const getRows=table=>Array.from（table.querySelectorAll（rowSelector））
//从具有数据列参数的表单输入中获取值
const getFilterValues=form=>Array.from（form.querySelectorAll（columnSelector））.map（inp=>（{'column'：inp.dataset.column，'value'：inp.value}）；
//如果此单元格文本包含该值，请选中
const checkCellValue=（cell，value）=>（new RegExp（value，'i'））.test（cell.textContent）
//获取数据列参数值与值参数匹配的表行单元格
const getCell=（行，值）=>row.querySelector（`[data column=“${value.column}`）
//筛选与值不匹配的行
常量filterRow=（行，值）=>{
常量筛选=值。减少（（进位，值）=>{
如果（！checkCellValue（getCell（行，值），value.value））{return true；}
回程进货
}，错）
如果（已过滤）{
row.classList.add（filteredClassName）
}否则{
row.classList.remove（filteredClassName）
}
}
//检查所有行，如果它们应该被过滤
常量filterRows=（行、值）=>{
forEach（行=>filterRow（行，值））
}
//输入上的行为
const onInput=e=>{
//检查是否从用作筛选器的窗体内部调用输入
const form=e.target.closest（formSelector）
//否则返回
如果（！form）{return；}
const target=getTarget（表单）
const rows=getRows（目标）
常量值=getFilterValues（表单）
filterRows（行、值）
}
//检查全局输入事件
document.addEventListener（'input'，onInput）
}

。已过滤{
显示：无；
}

身份证件
站台
位置
T-计数
作者
2-12-8374857-232
个人计算机
重庆
4.
乌本
更多信息
3-23-3939473-324
附言
迪拜
3.
希卡斯
更多信息
3-43-3245235-432
Xbox
巴黎
2.
芝加哥
更多信息
1-24-2594549-124
视场
柏林
5.
第1620页
更多信息

HTML代码是您自己控制的？还是来自您无法控制的外部源代码？由我编写…@yunzen然后我建议更改表代码非常感谢。它成功了。