Как отфильтровать несколько запросов в таблице с помощью W3.JS?который каждый запрос разделяется точкой с запятой (;) - PullRequest
Новая
       10

Как отфильтровать несколько запросов в таблице с помощью W3.JS?который каждый запрос разделяется точкой с запятой (;)

0 голосов
/ 27 декабря 2018

В коде, который я набрал, нет проблем, но я хочу знать, как сделать так, чтобы каждое слово, которое я ищу, могло быть разделено на ;.

Вот мой код: 

<!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].Результат должен исключать или скрывать другие элементы, кроме Германии и Швеции.

Есть ли какое-либо решение для этого?

1 Ответ

0 голосов
/ 27 декабря 2018

Вам нужно будет перестроить 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>
...