使用JavaScript在所有列上筛选包含文本字段的表_Javascript_Filtering

使用JavaScript在所有列上筛选包含文本字段的表

javascript

使用JavaScript在所有列上筛选包含文本字段的表,javascript,filtering,Javascript,Filtering,我有一个记录表，上面有一个文本字段，可以动态过滤特定表列上的记录。我按照这个方便的方法实现了它现在，它可以像广告中所说的那样工作，但我希望修改它，以便过滤器可以查看所有列，而不仅仅是其中一列。在How-To的示例中，我希望能够键入名称或国家，并返回所有匹配项。我试图在JavaScript中实现这一点： function myFunction() { // Declare variables var input, filter, table, tr, td, i; input

我有一个记录表，上面有一个文本字段，可以动态过滤特定表列上的记录。我按照这个方便的方法实现了它

现在，它可以像广告中所说的那样工作，但我希望修改它，以便过滤器可以查看所有列，而不仅仅是其中一列。在How-To的示例中，我希望能够键入名称或国家，并返回所有匹配项。我试图在JavaScript中实现这一点：

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++) {
  for (j = 0; j < tr.width; j++) {
    td = tr[i].getElementsByTagName("td")[j];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
        } else {
            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=“无”；
}}}}}

j变量是我希望在每个I的列中额外循环的地方，但这样做似乎会破坏过滤功能，即键入任何内容都不会影响显示的记录-所有记录始终显示。有人能告诉我我做错了什么吗？

你有几个错误：

1.对循环无效：

for（j=0；j


没有tr.width
这样的东西。或者更确切地说，它是一个jQuery函数，所以当您键入tr.width
时，您将得到它的文本
因此脚本中断，因为for循环
子句如果无效
如果您真的这样调用tr.width（）
，您将得到元素的像素宽度，因此它也不会对您有帮助
您需要的是
计数。以下是您获得它的方式：
let rowTds = tr[i].getElementsByTagName("td")
for (j = 0; j < rowTds.length; j++){...}

结论：根据W3schools教程调整的完整工作代码：
链接：

* {
框大小：边框框；
}
#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 10px；
背景重复：无重复；
宽度：100%；
字体大小：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；
}
我的顾客
名称
国家
阿尔弗雷德·福特基斯特
德国
伯格伦兹蛇
瑞典
岛屿贸易
英国
科尼格利希·埃森
德国
笑巴克斯酒窖
加拿大
马加兹尼营养不良
意大利
北/南
英国
巴黎特色酒店
法国
函数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=“无”；
}
}
}       
}
}
如果符合将tr
设置为display:none的条件，则需要中断内部循环。否则，与过滤器不匹配的后续单元格将重置显示值。该代码很难读取。使用更好的变量名并且不压缩end}将更容易理解发生了什么（对于您和其他人）。例如，可以使用trIndex和tdIndex代替i和j。也可以在开始迭代之前将tds加载到变量中：var allTds=tr[i].getElementsByTagName（“td”）；详细易懂！非常感谢！
td = tr[i].getElementsByTagName("td")[j];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
        break; // this will break the row looping on j after making the row visible.
        } else {
            tr[i].style.display = "none";
          }
        }
      }
    }
  }

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>My Customers</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>

<script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    let rowTds = tr[i].getElementsByTagName("td")
    for (j = 0; j < rowTds.length; j++){
      td = tr[i].getElementsByTagName("td")[j];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break;
        } else {
          tr[i].style.display = "none";
        }
      }
    }       
  }
}
</script>

</body>
</html>