Medianwert der JQuery-Abfragetabelle

In der Webentwicklung sind Tabellen häufige und wichtige Elemente. Das Abfragen und Filtern von Tabellendaten ist eine häufige Anforderung. jQuery ist eine sehr leistungsstarke JavaScript-Bibliothek, die eine Fülle von Selektoren und DOM-Manipulationsmethoden bereitstellt. In diesem Artikel wird die Verwendung von jQuery zum Abfragen von Werten in Tabellen vorgestellt.

1. Erhalten Sie die Daten in der Tabelle

Um die Werte in der Tabelle abzufragen, müssen Sie zunächst die Daten in der Tabelle abrufen. Mit jQuery können Sie die Daten in der Tabelle einfach abrufen.

HTML-Code lautet wie folgt:

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>London</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>20</td>
      <td>Paris</td>
    </tr>
  </tbody>
</table>

Der Code, der jQuery zum Abrufen von Tabellendaten verwendet, lautet wie folgt:

var tableData = [];
$("#myTable tbody tr").each(function() {
  var rowData = [];
  $(this).find("td").each(function() {
    rowData.push($(this).text());
  });
  tableData.push(rowData);
});
console.log(tableData);

Parsing-Code: Definieren Sie zuerst ein leeres Array tableData und verwenden Sie dann die Methode every(), um jede Zeile zu durchlaufen (tr ) in der Tabelle für jede Zeile. Verwenden Sie dann die Methode find(), um jede Zelle (td) in der Zeile zu durchlaufen und den Textinhalt in der Zelle zum Array rowData hinzuzufügen. Abschließend wird das rowData-Array zum tableData-Array hinzugefügt, wodurch ein zweidimensionales Array entsteht, in dem jedes Unterarray eine Datenzeile in der Tabelle darstellt.

2. Fragen Sie die Daten in der Tabelle ab

Das Abfragen der Daten in der Tabelle umfasst normalerweise zwei Aspekte: Abfrage nach Zeile und Abfrage nach Spalte. Diese beiden Abfragemethoden werden im Folgenden ausführlich vorgestellt.

2.1 Abfrage nach Zeile

Abfrage nach Zeile bedeutet, die Zeilendaten basierend auf dem Wert einer bestimmten Spalte in der Tabelle abzufragen. In der obigen Tabelle möchten Sie beispielsweise Informationen zu allen Personen abfragen, die in „London“ leben.

HTML-Code lautet wie folgt:

<input type="text" id="searchInput">
<button id="searchBtn">Search</button>
<table id="myTable">
  <!-- 同上 -->
</table>

Der Code für die zeilenweise Abfrage mit jQuery lautet wie folgt:

$("#searchBtn").click(function() {
  var searchText = $("#searchInput").val().toLowerCase();
  $("#myTable tbody tr").each(function() {
    var found = false;
    $(this).each(function() {
      if ($(this).text().toLowerCase().indexOf(searchText) >= 0) {
        found = true;
        return false;
      }
    });
    if (found) $(this).show();
    else $(this).hide();
  });
});

Parsing-Code: Rufen Sie zunächst den Wert des für die Suche verwendeten Textfelds ab und wandeln Sie ihn in Kleinbuchstaben um, um den späteren Vergleich zu erleichtern . Durchlaufen Sie dann jede Zeile in der Tabelle, dann jede Zelle und bestimmen Sie, ob der Wert in der Zelle das Schlüsselwort im Suchtextfeld enthält. Wenn gefunden, wird die Zeile angezeigt, andernfalls wird die Zeile ausgeblendet.

2.2 Abfrage nach Spalte

Abfrage nach Spalte bedeutet, die Daten einer bestimmten Zeile in der Tabelle abzufragen. In der obigen Tabelle möchten Sie beispielsweise die Informationen aller Personen abfragen, die älter als 25 Jahre sind.

HTML-Code ist der gleiche wie oben.

Der Code für die Abfrage nach Spalten mit jQuery lautet wie folgt:

$("#searchBtn").click(function() {
  var columnIndex = 1; //查询年龄这一列
  var searchText = $("#searchInput").val().toLowerCase();
  $("#myTable tbody tr").each(function() {
    var tdValue = $(this).find("td:eq(" + columnIndex + ")").text();
    if (parseInt(tdValue) > parseInt(searchText)) $(this).show();
    else $(this).hide();
  });
});

Parsen des Codes: Definieren Sie zunächst den Index (columnIndex) der abzufragenden Spalte als 1, also die Altersspalte. Ermitteln Sie dann den Wert des Suchtextfelds und konvertieren Sie ihn ebenfalls in Kleinbuchstaben. Durchlaufen Sie jede Zeile in der Tabelle, ermitteln Sie den Wert der entsprechenden Spalte in jeder Zeile über die Methode eq() und konvertieren Sie ihn zum Vergleich über die Methode parseInt() in einen ganzzahligen Typ. Wenn die Bedingungen erfüllt sind, wird die Datenzeile angezeigt, andernfalls wird die Datenzeile ausgeblendet.

3. Zusammenfassung

In diesem Artikel wird die Verwendung von jQuery zum Abfragen von Daten in Tabellen vorgestellt, einschließlich der Abfrage nach Zeilen und der Abfrage nach Spalten. Mit den Selektoren und DOM-Operationsmethoden von jQuery können Sie Tabellendaten einfach abfragen und filtern. Es ist zu beachten, dass bei großen Tabellendaten die Abfrageleistung beeinträchtigt werden kann und eine geeignete Lösung ausgewählt werden muss, um die Abfrageeffizienz zu verbessern.

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