Hier lernen wir, wie man eine Echtzeitsuche durchführt und eine HTML-Tabelle filtert. Wenn ein Wort eingegeben wird, werden alle Zeilen der Tabelle durchsucht (außer dem Tabellenkopf) und die Zeilen angezeigt, die das passende Wort enthalten. Dazu können wir JQuery-Methoden verwenden.

  • filter(): Diese Methode wird verwendet, um alle Elemente herauszufiltern, die den ausgewählten Kriterien nicht entsprechen, und diese Übereinstimmungen werden zurückgegeben. Reduzieren Sie die Menge der übereinstimmenden Elemente auf diejenigen, die mit dem Selektor übereinstimmen, oder bestehen Sie den Test der Funktion.
  • toggle(): Diese Methode wird verwendet, um die Sichtbarkeit ausgewählter Elemente zu prüfen, um zwischen hide() und show() für die ausgewählten Elemente umzuschalten. Zeigen Sie die übereinstimmenden Elemente an oder blenden Sie sie aus.

Im folgenden Beispiel wird der in das Suchfeld eingegebene Suchwert in der Variablen mit dem Namen „Wert“ gespeichert und in Kleinbuchstaben konvertiert, da wir eine Suche ohne Berücksichtigung der Groß-/Kleinschreibung durchführen. Danach durchsuchen wir jede Zeile in der Tabelle mit der Funktion filter() und zeigen die Zeile an, in der die in der Variablen „value“ gespeicherte Zeichenfolge gefunden wird. Die Methode toggle() wird verwendet, um die Zeilen anzuzeigen, die das Suchwort enthalten, und andere auszublenden. Der indexOf(value) gibt -1 zurück, wenn das Wort nicht in der Zeile gefunden wird.

Beispiel: Das folgende Beispiel veranschaulicht die Verwendung der Funktionen filter() und toggle(), um eine Echtzeitsuche und Filterung in HTML-Tabellen durchzuführen.

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
  
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 50%;
        }
          
        td,
        th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
          
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h3>
          perform a real time search and filter 
          on a HTML table
        </h3>
        <b>Search the table for Course, Fees or Type: 
          <input id="gfg" type="text" 
                 placeholder="Search here">
        </b>
        <br>
        <br>
        <table>
            <tr>
                <th>Course</th>
                <th>Duration</th>
                <th>Type</th>
            </tr>
            <tbody id="geeks">
                <tr>
                    <td>C++ STL</td>
                    <td>1499</td>
                    <td>Online Classes
                    </td>
                </tr>
                <tr>
                    <td>DSA Foundation</td>
                    <td>7999</td>
                    <td>Regular Classes</td>
                </tr>
                <tr>
                    <td>Geeks Classes</td>
                    <td>10799</td>
                    <td>Weekend Classes</td>
                </tr>
                <tr>
                    <td>Placement 100</td>
                    <td>9999</td>
                    <td>Online Classes</td>
                </tr>
            </tbody>
        </table>
  
        <script>
            $(document).ready(function() {
                $("#gfg").on("keyup", function() {
                    var value = $(this).val().toLowerCase();
                    $("#geeks tr").filter(function() {
                        $(this).toggle($(this).text()
                        .toLowerCase().indexOf(value) > -1)
                    });
                });
            });
        </script>
  </center>
  
</body>
  
</html>

Ausgabe: