Javascript 使用多个搜索框筛选单个表

我有一个表，但想添加更多搜索框来筛选同一个表。 尝试添加更多搜索框和

javascript

，但无法相应地筛选表。我想（例如）看看哪些“BUCO”公司将“EOH”作为二级服务提供商

请参阅下面的代码：

* {
框大小：边框框；
}
#我的输入{
背景图像：url（'https://www.w3schools.com/css/searchicon.png');
背景位置：10px 10px；
背景重复：无重复；
宽度：20%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
#我的桌子{
边界塌陷：塌陷；
宽度：100%；
边框：1px实心#ddd；
字号：18px；
}
#我的表th，#我的表td{
文本对齐：左对齐；
填充：12px；
}
#myTable tr{
边框底部：1px实心#ddd；
}
#myTable tr.header，#myTable tr:悬停{
背景色：#f1f1；
}
.中心{
显示：块；
左边距：自动；
右边距：自动；
宽度：30%；
}
站点配置管理
单位
分支机构名称
广告站点号
站点服务器名称
主要提供者
初级类型
主线速度
一次回路编号
辅助主提供商
二级类型
二次线速度
二次回路编号
语音电话供应商
电子邮件通知组
资讯科技统筹主任
店主
商店固定电话号码
物理地址
周一至周五
坐
太阳
公众假期
双叶树
德班双叶树酒店
1178
1178fp01
印尼电信
我
2mbps
770162222
印尼电信
ADSL
2mbps
671495466
布加勒
布切尔阿卡迪亚酒店
1172
1172fp01
印尼电信
我
2mbps
730343022
印尼电信
ADSL
2mbps
632945266
布加勒
布切尔仙境格伦酒店
1173
1173fp01
印尼电信
我
2mbps
730343822
印尼电信
ADSL
2mbps
632944866
印尼电信
1172@steinbuild.com
467564745
45674567457
657675464
5675467456，豪登，0083
布加勒
布加勒北地酒店
1199
1199fp01
印尼电信
我
2mbps
740510222
印尼电信
ADSL
2mbps
642418266
印尼电信
64745674
5476457
567457
467457645
5674764
布科
布科阿科霍克酒店
1056
1056fp01
印尼电信
ADSL
2mbps
632726066
印尼电信
ADSL
2mbps
632950666
07h30-16h30
07h30-12h30
关闭
关闭
布科
布科爱丽丝酒店
0024
没有服务器
EOH NS
ADSL
1mbps
406530082
EOH NS
3G-Metacom
40240155
印尼电信
4576567
547567
M547546754
5674575
5745675476
08时00分至17时00分
08h00-13h00
-
-
布科
布科阿索
1166
1166fp01
印尼电信
我
2mbps
4574574576
印尼电信
ADSL
2mbps
611581666
印尼电信
567457645
457456745
5476547
45674574
5674456745
07h30-17h00
07h30-13h00
关闭
关闭
布科
布科伯格维特酒店
1165
1165fp01
印尼电信
我
710204322
印尼电信
ADSL
2mbps
611581866
印尼电信
457576645
457657645
5474567457
021 696 5167
54674567457
07h30-17h00
08h00-13h00
关闭
08h00-13h00
函数myFunction（）{
var输入、过滤器、表格、tr、td、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}       
}
}

---

选中

我建议在阵列外部保持过滤器状态。然后，无论何时设置过滤器，都会使用新数据重新显示该表。比如：

let filters=[“”，“”]；
函数集过滤器（thisInput，thisIndex）{
过滤器[thisIndex]=thisInput.value.toUpperCase（）；
filterTable（）；
}
函数filterTable（）{
var table=document.getElementById（“myTable”）；
var rows=Object.values（table.getElementsByTagName（“tr”）；
对于（var rowItr=1；rowItr{
变量单元格=单元格[filterIndex]；
var txtValue=cell.textContent | | cell.innerText；
返回filter==“”| | txtValue.toUpperCase（）.indexOf（filter）>-1；
});
row.style.display=isRowVisible？”：“无”；
};
}

*{
框大小：边框框；
}
.myInput{
背景图像：url（'https://www.w3schools.com/css/searchicon.png');
背景位置：10px 10px；
背景重复：无重复；
宽度：20%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
#我的桌子{
边界塌陷：塌陷；
宽度：100%；
边框：1px实心#ddd；
字号：18px；
}
#我的表th，#我的表td{
文本对齐：左对齐；
填充：12px；
}
#myTable tr{
边框底部：1px实心#ddd；
}
#myTable tr.header，#myTable tr:悬停{
背景色：#f1f1；
}
.中心{
显示：块；
左边距：自动；
右边距：自动；
宽度：30%；
}

站点配置管理
单位
分支机构名称
广告站点号
站点服务器名称
主要提供者
初级类型
主线速度
一次回路编号
辅助主提供商
二级类型
二次线速度
onkeyup="myFunction(this)"

function myFunction(that){
 var input, filter, table, tr, td, i, txtValue;
 input = that;
//rest of code
}