Durchsucht JQuery Tabelleninhalte?

Tabellen sind eine gängige Methode zum Anzeigen von Daten beim Schreiben von Webanwendungen. Oft enthalten diese Tabellen große Datenmengen, sodass Benutzer suchen müssen, um die spezifischen Daten herauszufiltern, die ihren Anforderungen entsprechen. Zu diesem Zweck können wir jQuery verwenden, um die Tabellensuchfunktion zu implementieren.

Zuerst müssen wir eine Tabelle in HTML erstellen und ihr Kopfzeilen und Datenzeilen hinzufügen:

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

Als nächstes müssen wir jQuery-Code schreiben, um die Suchfunktion zu implementieren. Zuerst konvertieren wir den Tabelleninhalt in ein Array und speichern ihn in einer Variablen:

$(document).ready(function() {
  var tableData = [];
  $('#myTable tbody tr').each(function(row, tr) {
    tableData[row] = {
      'name': $(tr).find('td:eq(0)').text(),
      'age': $(tr).find('td:eq(1)').text(),
      'gender': $(tr).find('td:eq(2)').text()
    }
  });
});

In diesem Code verwenden wir die every-Methode von jQuery, um jede Zeile der Tabelle zu durchlaufen und sie in ein Array mit 3 Eigenschaften (Name, Alter) umzuwandeln , Geschlecht). Unter anderem haben wir die eq-Methode verwendet, um den Indexwert jeder Zelle abzurufen, und die text-Methode, um den Textinhalt in der Zelle abzurufen.

Als nächstes können wir eine Suchfunktion schreiben, die die Tabellendaten basierend auf vom Benutzer eingegebenen Schlüsselwörtern filtert. In dieser Funktion haben wir die grep-Methode von jQuery verwendet, mit der bestimmte Elemente in einem Array gefunden werden können:

function searchTable(inputVal) {
  var filteredData = $.grep(tableData, function(item) {
    return item.name.toLowerCase().indexOf(inputVal.toLowerCase()) > -1 ||
           item.age.toLowerCase().indexOf(inputVal.toLowerCase()) > -1 ||
           item.gender.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
  });
  return filteredData;
}

In diesem Code haben wir die toLowerCase-Methode verwendet, um die Schlüsselwörter und Tabellendaten in Kleinbuchstaben umzuwandeln und so die Groß-/Kleinschreibung zu implementieren -unempfindliche Suchen. Anschließend verwenden wir die Methode indexOf, um Tabellendaten zu finden, die das Schlüsselwort enthalten.

Schließlich müssen wir einen Ereignishandler binden, um die Suchfunktion aufzurufen und den Tabelleninhalt zu aktualisieren, wenn der Benutzer ein Schlüsselwort eingibt:

$('#searchInput').on('keyup', function() {
  var inputVal = $(this).val();
  var filteredData = searchTable(inputVal);
  var tableRows = '';
  $.each(filteredData, function(index, data) {
    tableRows += '<tr>' +
                   '<td>' + data.name + '</td>' +
                   '<td>' + data.age + '</td>' +
                   '<td>' + data.gender + '</td>' +
                 '</tr>';
  });
  $('#myTable tbody').html(tableRows);
});

In diesem Code verwenden wir das Keyup-Ereignis, um auf Benutzereingaben zu warten und die Textschlüsselwörter abzurufen in der Box. Anschließend rufen wir die Suchfunktion auf, um die gefilterten Tabellendaten abzurufen und in HTML-Code umzuwandeln, um den Tabelleninhalt zu aktualisieren.

Zusammenfassend haben wir mit jQuery einen Code geschrieben, um die schlüsselwortbasierte Tabellensuchfunktion zu implementieren. Auf diese Weise können Benutzer bestimmte Daten leicht finden, was die Benutzerfreundlichkeit und das Benutzererlebnis des Systems verbessert.

Das obige ist der detaillierte Inhalt vonDurchsucht JQuery Tabelleninhalte?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!