如何使用 W3.JS 过滤 table 中的多个查询？每个查询都用分号 (;) 分隔

Question

我输入的代码没有问题，但我想知道如何让我查找的每个单词都可以用;分隔。

这是我的代码：

<!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>

例如，我正在寻找德国和瑞典 [Germany;Sweden]。结果应排除或隐藏除德国和瑞典以外的其他元素。

有什么解决办法吗？

Answer 1

您将需要重建 w3.filterHTML 来处理这个请求。 w3 对函数进行编码的默认方式不允许您这样做。我创建了一个名为 w3.advancedFilterHTML 的新脚本。这个过滤器将完成工作，我们不必担心删除原来的 w3 过滤器。

您将通过将 oninput 代码更改为如下所示来实现它：

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

然后您将 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>

这是一个工作示例：

<!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 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>

  <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 过滤 table 中的多个查询？每个查询都用分号 (;) 分隔

How to filter multiple query in a table with W3.JS? which every query separated with semicolon (;)

html

javascript

w3.js