如何使用简单的javascript过滤html表？

我有一个筛选表的代码。它将仅基于第一列进行过滤。如何使其仅过滤第二列。还有如何过滤完整的表

我想不出做这件事的方法。我试图在没有任何其他外部库的情况下获得帮助

名称
国家
阿尔弗雷德·福特基斯特
德国
伯格伦兹蛇
瑞典
岛屿贸易
英国
科尼格利希·埃森
德国
笑巴克斯酒窖
加拿大
马加兹尼营养不良
意大利
北/南
英国
巴黎特色酒店
法国
函数myFunction（）{
var输入、过滤器、表格、tr、td、i；
输入=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=“无”；
}
}       
}
}

你就快到了。您所需要做的就是创建另一个for循环，迭代行中的所有

td

元素，并使用它们进行过滤。这样，如果将来添加任何列，过滤器将继续工作

在下面的代码段中，我已经完成了这项工作，并稍微修改了隐藏逻辑。我首先隐藏所有行，如果找到匹配项，我将取消隐藏

for (i = 1; i < tr.length; i++) {
    // Hide the row initially.
    tr[i].style.display = "none";

    td = tr[i].getElementsByTagName("td");
    for (var j = 0; j < td.length; j++) {
      cell = tr[i].getElementsByTagName("td")[j];
      if (cell) {
        if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break;
        } 
      }
    }
}

for（i=1；i-1）{
tr[i].style.display=“”；
打破
} 
}
}
}

函数myFunction（）{
var输入，过滤器，表格，tr，td，单元格，i，j；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=1；i-1）{
tr[i].style.display=“”；
打破
} 
}
}
}
}

名称
国家
阿尔弗雷德·福特基斯特
德国
伯格伦兹蛇
瑞典
岛屿贸易
英国
科尼格利希·埃森
德国
笑巴克斯酒窖
加拿大
马加兹尼营养不良
意大利
北/南
英国
巴黎特色酒店
法国

仅更改

td = tr[i].getElementsByTagName("td")[0];

到

应该行得通

更新

添加所有搜索列

函数myFunction（）{
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（变量i=0；i-1）{
flag=true；
} 
}
国际单项体育联合会（旗）{
tr[i].style.display=“”；
}
否则{
tr[i].style.display=“无”；
}
}
}

名称
国家
阿尔弗雷德·福特基斯特
德国
伯格伦兹蛇
瑞典
岛屿贸易
英国
科尼格利希·埃森
德国
笑巴克斯酒窖
加拿大
马加兹尼营养不良
意大利
北/南
英国
巴黎特色酒店
法国

带有

您只选择了第一个

td

。相反，检查

td

s中的

some

是否有问题的字符串：

函数myFunction（）{
常量输入=document.getElementById（“myInput”）；
const inputStr=input.value.toUpperCase（）；
document.querySelectorAll（'#myTable tr:not（.header）'）.forEach（（tr）=>{
const anyMatch=[…tr.children]
.some（td=>td.textContent.toUpperCase（）.includes（inputStr））；
if（anyMatch）tr.style.removeProperty（'display'）；
else tr.style.display='none'；
});
}

名称
国家
阿尔弗雷德·福特基斯特
德国
伯格伦兹蛇
瑞典
岛屿贸易
英国
科尼格利希·埃森
德国
笑巴克斯酒窖
加拿大
马加兹尼营养不良
意大利
北/南
英国
巴黎特色酒店
法国

您可以执行以下操作：

constmyfunction=（）=>{
const trs=document.querySelectorAll（“#myTable tr:not（.header）”；
const filter=document.querySelector（“#myInput”）.value；
const regex=new RegExp（过滤器'i'）；
const isFoundInTds=（td）=>regex.test（td.innerHTML）；
常量isFound=（childrenArr）=>childrenArr.some（isFoundInTds）；
const setTrStyleDisplay=（{style，children}）=>{
style.display=isFound（[…子项]）？“”：“无”；
};
trs.forEach（setTrStyleDisplay）；
};

名称
国家
阿尔弗雷德·福特基斯特
德国
伯格伦兹蛇
瑞典
岛屿贸易
英国
科尼格利希·埃森
德国
笑巴克斯酒窖
加拿大
马加兹尼营养不良
意大利
北/南
英国
巴黎特色酒店
法国
以下是要执行的代码
td = tr[i].getElementsByTagName("td")[1];

td = tr[i].getElementsByTagName("td")[0];