Javascript 修改w3示例表过滤器以搜索多个列

我在PHP中工作，每行有大量交替的列。行和列由一系列从MYSQL数据库调用内容的“foreach”循环生成和填充

我对PHP/HTML和MYSQL这两个方面非常熟悉

我试图使用Javascript为这个表创建一些“快速过滤器”

我从w3上的一个示例开始，如下所示

    <script> 
     function myFunction() {
 // Declare variables 
  var input, filter, table, tr, td, i;
 input = document.getElementById("myInput");
 filter = input.value.toUpperCase();
 table = document.getElementById("myTable");
 tr = table.getElementsByTagName("tr");

 // Loop through all table rows, and hide those who don't match the 
search query
 for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
  if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
    tr[i].style.display = "";
  } else {
    tr[i].style.display = "none";
  }
 } 
}
}
</script>

末尾的[0]表示它只搜索“第一”列。将0更改为另一个数字将更改为搜索整个表的相应列

我觉得必须有一个简单的方法来扩展到多个列。我对JS完全陌生，所以我真的在这里摸索

我尝试了所有我能想到的基本方法，比如改变数字，比如：

[0,1,2,3,4]// [0-4]// [0][1][2] 

这些简单的事情似乎都不是我想要的。它要么为要搜索的列选择最后列出的数字，要么干脆将其全部打断

您必须嵌套循环！ 我必须使用额外的变量引用来检查引用是否在同一行的任何td中。 因此，如果没有，该行可以隐藏

  function myFunction() {
      // Declare variables 
      var input, filter, table, tr, td, i, occurrence;

      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      table = document.getElementById("myTable");
      tr = table.getElementsByTagName("tr");

      // Loop through all table rows, and hide those who don't match the search query
     for (i = 0; i < tr.length; i++) {
         occurrence = false; // Only reset to false once per row.
         td = tr[i].getElementsByTagName("td");
         for(var j=0; j< td.length; j++){                
             currentTd = td[j];
             if (currentTd ) {
                 if (currentTd.innerHTML.toUpperCase().indexOf(filter) > -1) {
                     tr[i].style.display = "";
                     occurrence = true;
                 } 
             }
         }
         if(!occurrence){
             tr[i].style.display = "none";
         } 
     }
   }

函数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=“无”；
} 
}
}

currentTd[j]就是您要找的！ 但由于您可能不知道一行中有多少td，因此必须使用for循环

您必须嵌套循环！ 我必须使用额外的变量引用来检查引用是否在同一行的任何td中。 因此，如果没有，该行可以隐藏

  function myFunction() {
      // Declare variables 
      var input, filter, table, tr, td, i, occurrence;

      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      table = document.getElementById("myTable");
      tr = table.getElementsByTagName("tr");

      // Loop through all table rows, and hide those who don't match the search query
     for (i = 0; i < tr.length; i++) {
         occurrence = false; // Only reset to false once per row.
         td = tr[i].getElementsByTagName("td");
         for(var j=0; j< td.length; j++){                
             currentTd = td[j];
             if (currentTd ) {
                 if (currentTd.innerHTML.toUpperCase().indexOf(filter) > -1) {
                     tr[i].style.display = "";
                     occurrence = true;
                 } 
             }
         }
         if(!occurrence){
             tr[i].style.display = "none";
         } 
     }
   }

函数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=“无”；
} 
}
}

currentTd[j]就是您要找的！ 但由于您可能不知道一行中有多少td，因此必须使用for循环