Javascript 选择输入过滤器

我有这个密码。应为带有类别筛选器的表。我定义了循环，但它不起作用…当我按下category时，它就起作用了，但当我想单击更多时间时，它就不起作用了，它会在第一次单击category时停止。需要一些可能有问题的建议

当我在TR上没有类的情况下尝试它时，它工作得很好，但当我添加类时，它停止了工作

highlightRows=（）=>{
让oddRows=document.queryselectoral（'tbody>tr.show'））
oddRows.forEach（（行，索引）=>{
如果（索引%2==0）{
row.style.background='#f1f1'
}否则{
row.style.background='#fff'
}
})
}
常量过滤器选项=（）=>{
const option=document.querySelector（“#filter”）.value；
常量选择=选项。替换（'&'，''）
const rows=document.queryselectoral（“tbody>tr.head”）；
rows.forEach（row=>{
设td=row.querySelector（“td:last child”）；
让filter=td.innerText.replace（'&'，''）；
如果（过滤器===选择）{
row.className='show'
}否则{
row.className='hidden'
}
});
highlightRows（）
};
document.getElementById（“过滤器”）.addEventListener（“更改”，过滤器选项）
。表过滤器{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
边缘底部：2米；
}
.表格过滤器a{
颜色：#222；
字体大小：16px；
字号：500；
右边距：1米；
显示：内联块；
}
.表格过滤器a：悬停{
文字装饰：无；
}
.表格过滤器选择{
背景：#fff；
字体大小：16px；
字号：500；
宽度：12em；
高度：2.5em；
}
表1.stats{
背景：#fff；
宽度：100%；
表布局：固定；
边界半径：6px；
}
泰德{
背景#F36F20；
颜色：#fff；
}
th{
字体大小：16px；
字号：500；
文本对齐：左对齐；
填充：1em；
边框底部：1px实心#ddd；
}
tbody td{
填料：1.5em 1em；
}
tbody tr.show{
显示：表格行；
}
隐藏的{
显示：无；
}
t车身tr.bg-灰色，t车身tr:第n个子（奇数）{
背景#f1f1；
}
tbody tr：最后一个孩子td{
边框底部：无；
}

卡泰戈里
多莫夫
奥斯塔涅
爱好
扎赫拉达
纳佐夫
苏玛
卡泰戈里亚
洛勒姆
乱数假文
奥斯塔涅
洛勒姆
乱数假文
奥斯塔涅
洛勒姆
乱数假文
多莫夫
洛勒姆
乱数假文
奥斯塔涅
洛勒姆
乱数假文
爱好
洛勒姆
乱数假文
爱好
洛勒姆
乱数假文
多莫夫
问题：您通过
tr.head
（通过它们的head类）获得所有
tr
（行），但当您过滤它时，您正在替换
head
类以显示和隐藏，这是javascript第二次没有发现任何行具有class
head
，因此，要解决此问题，请通过
tbody>tr
获取
tbody
中的所有行

示例如下：


highlightRows=（）=>{
让oddRows=document.queryselectoral（'tbody>tr.show'））
oddRows.forEach（（行，索引）=>{
如果（索引%2==0）{
row.style.background='#f1f1'
}否则{
row.style.background='#fff'
}
})
}
常量过滤器选项=（）=>{
const option=document.querySelector（“#filter”）.value；
常量选择=选项。替换（'&'，''）
var rows=document.queryselectoral（#body1>tr）；
rows.forEach（row=>{
设td=row.querySelector（“td:last child”）；
让filter=td.innerText.replace（'&'，''）；
如果（过滤器===选择）{
row.className='show'
}否则{
row.className='hidden'
}
});
highlightRows（）
};
document.getElementById（“过滤器”）.addEventListener（“更改”，过滤器选项）
。表过滤器{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
边缘底部：2米；
}
.表格过滤器a{
颜色：#222；
字体大小：16px；
字号：500；
右边距：1米；
显示：内联块；
}
.表格过滤器a：悬停{
文字装饰：无；
}
.表格过滤器选择{
背景：#fff；
字体大小：16px；
字号：500；
宽度：12em；
高度：2.5em；
}
表1.stats{
背景：#fff；
宽度：100%；
表布局：固定；
边界半径：6px；
}
泰德{
背景#F36F20；
颜色：#fff；
}
th{
字体大小：16px；
字号：500；
文本对齐：左对齐；
填充：1em；
边框底部：1px实心#ddd；
}
tbody td{
填料：1.5em 1em；
}
tbody tr.show{
显示：表格行；
}
隐藏的{
显示：无；
}
t车身tr.bg-灰色，t车身tr:第n个子（奇数）{
背景#f1f1；
}
tbody tr：最后一个孩子td{
边框底部：无；
}

卡泰戈里
多莫夫
奥斯塔涅
爱好
扎赫拉达
纳佐夫
苏玛
卡泰戈里亚
洛勒姆
乱数假文
奥斯塔涅
洛勒姆
乱数假文
奥斯塔涅
洛勒姆
乱数假文
多莫夫
洛勒姆
乱数假文
奥斯塔涅
洛勒姆
乱数假文
爱好
洛勒姆
乱数假文
爱好
洛勒姆
乱数假文
多莫夫
如果我有多个表怎么办？它将影响没有类的每个表。这是有原因的