如何使用W3.JS过滤表中的多个查询？每个查询用分号（;）分隔

Question

There is no problem in the code that I have typed, but I want to know how to make every word that I look for can be separated by ; 我键入的代码没有问题，但是我想知道如何使要查找的每个单词都可以用;分隔; . 。

Here is my code: 这是我的代码：

<!DOCTYPE html>
<html>
<title>W3.JS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body class="w3-container">

<h2>Testing W3.JS with CSS</h2>

<h2>Filter Table</h2>

<p>Search for a name in the input field:</p>

<p>
<input oninput="w3.filterHTML('#id01', '.item', this.value)" class="w3-input" placeholder="Search for names..">
</p>

<table id="id01" class="w3-table-all">
  <tr>
    <th>Customer</th>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr class="item">
    <td>Alfreds Futterkiste</td>
    <td>Berlin</td>
    <td>Germany</td>
  </tr>
  <tr class="item">
    <td>Berglunds snabbköp</td>
    <td>Lule </td>
    <td>Sweden</td>
  </tr>
  <tr class="item">
    <td>Centro comercial Moctezuma</td>
    <td>México D.F.</td>
    <td>Mexico</td>
  </tr>
  <tr class="item">
    <td>Ernst Handel</td>
    <td>Graz</td>
    <td>Austria</td>
  </tr>
  <tr class="item">
    <td>FISSA Fabrica Inter. Salchichas S.A.</td>
    <td>Madrid</td>
    <td>Spain</td>
  </tr>
  <tr class="item">
    <td>Galería del gastrónomo</td>
    <td>Barcelona</td>
    <td>Spain</td>
  </tr>
  <tr class="item">
    <td>Island Trading</td>
    <td>Cowes</td>
    <td>UK</td>
  </tr>
  <tr class="item">
    <td>Königlich Essen</td>
    <td>Brandenburg</td>
    <td>Germany</td>
  </tr>
  <tr class="item">
    <td>Laughing Bacchus Wine Cellars</td>
    <td>Vancouver</td>
    <td>Canada</td>
  </tr>
  <tr class="item">
    <td>Magazzini Alimentari Riuniti</td>
    <td>Bergamo</td>
    <td>Italy</td>
  </tr>
  <tr class="item">
    <td>North/South</td>
    <td>London</td>
    <td>UK</td>
  </tr>
  <tr class="item">
    <td>Paris spécialités</td>
    <td>Paris</td>
    <td>France</td>
  </tr>
  <tr class="item">
    <td>Rattlesnake Canyon Grocery</td>
    <td>Albuquerque</td>
    <td>USA</td>
  </tr>
  <tr class="item">
    <td>Simons bistro</td>
    <td>København</td>
    <td>Denmark</td>
  </tr>
  <tr class="item">
    <td>The Big Cheese</td>
    <td>Portland</td>
    <td>USA</td>
  </tr>
  <tr class="item">
    <td>Vaffeljernet</td>
    <td>Århus</td>
    <td>Denmark</td>
  </tr>
  <tr class="item">
    <td>Wolski Zajazd</td>
    <td>Warszawa</td>
    <td>Poland</td>
  </tr>
</table>

</body>
</html>

For example, I'm looking for Germany and Sweden [Germany;Sweden] . 例如，我正在寻找德国和瑞典[Germany;Sweden] 。 The result should exclude or hide other elements except German and Sweden. 结果应排除或隐藏除德国和瑞典以外的其他元素。

Any solution for this? 有什么解决办法吗？

Answer 1

You will need to rebuild the w3.filterHTML to handle this request. 您将需要重建w3.filterHTML来处理此请求。 The default way w3 has coded the function will not let you do this. w3对函数进行编码的默认方式将不允许您执行此操作。 I have created a new script called w3.advancedFilterHTML . 我创建了一个名为w3.advancedFilterHTML的新脚本。 This filter will get the job done and we dont have to worry about removing the original w3 filter. 该过滤器将完成工作，我们不必担心删除原始的w3过滤器。

You will implement it by changing your oninput code to look like this: 您将通过将oninput代码更改为以下形式来实现它：

oninput="w3.advancedFilterHTML('#id01', '.item', this.value)"

And you will add this javascript to the page: 并将此javascript添加到页面：

<script>
  w3.advancedFilterHTML = function(id, sel, filter) {
    var a, b, c, i, ii, iif, iii, hit;
    var advancedFilter = filter.split(";");

    a = w3.getElements(id);
    for (i = 0; i < a.length; i++) {
      b = w3.getElements(sel);

      for (ii = 0; ii < b.length; ii++) {
        hit = 0;

        for (iif = 0; iif < advancedFilter.length; iif++) {

          if (b[ii].innerHTML.toUpperCase().indexOf(advancedFilter[iif].toUpperCase()) > -1) {
            hit = 1;
          }

          c = b[ii].getElementsByTagName("*");
          for (iii = 0; iii < c.length; iii++) {
            if (c[iii].innerHTML.toUpperCase().indexOf(advancedFilter[iif].toUpperCase()) > -1) {
              hit = 1;
            }
          }

          if (hit == 1) {
            b[ii].style.display = "";
          } else {
            b[ii].style.display = "none";
          }          

        }

      }

    }
  };
</script>

Here is a working example: 这是一个工作示例：

 <!DOCTYPE html> <html> <title>W3.JS</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <script src="https://www.w3schools.com/lib/w3.js"></script> <body class="w3-container"> <h2>Testing W3.JS with CSS</h2> <h2>Filter Table</h2> <p>Search for a name in the input field:</p> <p> <input oninput="w3.advancedFilterHTML('#id01', '.item', this.value)" class="w3-input" placeholder="Search for names.."> </p> <table id="id01" class="w3-table-all"> <tr> <th>Customer</th> <th>City</th> <th>Country</th> </tr> <tr class="item"> <td>Alfreds Futterkiste</td> <td>Berlin</td> <td>Germany</td> </tr> <tr class="item"> <td>Berglunds snabbköp</td> <td>Lule </td> <td>Sweden</td> </tr> <tr class="item"> <td>Centro comercial Moctezuma</td> <td>México DF</td> <td>Mexico</td> </tr> <tr class="item"> <td>Ernst Handel</td> <td>Graz</td> <td>Austria</td> </tr> <tr class="item"> <td>FISSA Fabrica Inter. Salchichas SA</td> <td>Madrid</td> <td>Spain</td> </tr> <tr class="item"> <td>Galería del gastrónomo</td> <td>Barcelona</td> <td>Spain</td> </tr> <tr class="item"> <td>Island Trading</td> <td>Cowes</td> <td>UK</td> </tr> <tr class="item"> <td>Königlich Essen</td> <td>Brandenburg</td> <td>Germany</td> </tr> <tr class="item"> <td>Laughing Bacchus Wine Cellars</td> <td>Vancouver</td> <td>Canada</td> </tr> <tr class="item"> <td>Magazzini Alimentari Riuniti</td> <td>Bergamo</td> <td>Italy</td> </tr> <tr class="item"> <td>North/South</td> <td>London</td> <td>UK</td> </tr> <tr class="item"> <td>Paris spécialités</td> <td>Paris</td> <td>France</td> </tr> <tr class="item"> <td>Rattlesnake Canyon Grocery</td> <td>Albuquerque</td> <td>USA</td> </tr> <tr class="item"> <td>Simons bistro</td> <td>København</td> <td>Denmark</td> </tr> <tr class="item"> <td>The Big Cheese</td> <td>Portland</td> <td>USA</td> </tr> <tr class="item"> <td>Vaffeljernet</td> <td>Århus</td> <td>Denmark</td> </tr> <tr class="item"> <td>Wolski Zajazd</td> <td>Warszawa</td> <td>Poland</td> </tr> </table> <script> w3.advancedFilterHTML = function(id, sel, filter) { var a, b, c, i, ii, iif, iii, hit; var advancedFilter = filter.split(";"); a = w3.getElements(id); for (i = 0; i < a.length; i++) { b = w3.getElements(sel); for (ii = 0; ii < b.length; ii++) { hit = 0; for (iif = 0; iif < advancedFilter.length; iif++) { if (b[ii].innerHTML.toUpperCase().indexOf(advancedFilter[iif].toUpperCase()) > -1) { hit = 1; } c = b[ii].getElementsByTagName("*"); for (iii = 0; iii < c.length; iii++) { if (c[iii].innerHTML.toUpperCase().indexOf(advancedFilter[iif].toUpperCase()) > -1) { hit = 1; } } if (hit == 1) { b[ii].style.display = ""; } else { b[ii].style.display = "none"; } } } } }; </script> </body> </html>

如何使用W3.JS过滤表中的多个查询？每个查询用分号（;）分隔

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-12-27 18:19:39

如何使用W3.JS过滤表中的多个查询？ 每个查询用分号（;）分隔

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-12-27 18:19:39

如何使用W3.JS过滤表中的多个查询？每个查询用分号（;）分隔

解决方案1
1 已采纳 2018-12-27 18:19:39