So lassen Sie Javascript mehrere Spalten und Zeilen in einer Tabelle durchsuchen

Joe

Ich versuche herauszufinden, wie alle 5 Spalten und Zeilen durchsuchbar gemacht werden können. Im Moment wird nur über die erste Spalte ( DATE) gesucht . Könnte mir bitte jemand dabei helfen, alle Spalten und Zeilen zu durchsuchen? Ich habe HTML, CSS und Javascript eingefügt, um so viele Informationen wie möglich bereitzustellen.

function myFunction() {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}
#myInput {
    background-image: url('/css/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
}

#myTable {
    border-collapse: collapse; /* Collapse borders */
    width: 100%; /* Full-width */
    border: 1px solid #ddd; /* Add a grey border */
    font-size: 18px; /* Increase font-size */
}

#myTable th, #myTable td {
    text-align: left; /* Left-align text */
    padding: 12px; /* Add padding */
}

#myTable tr {
    /* Add a bottom border to all table rows */
    border-bottom: 1px solid #ddd; 
}

#myTable tr.header, #myTable tr:hover {
    /* Add a grey background color to the table header and on hover */
    background-color: #f1f1f1;
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<table id="myTable">
  <tr class="header">
    <th style="width:20%;">Date</th>
    <th style="width:20%;">Home</th>
    <th style="width:20%;">Time</th>
    <th style="width:20%;">Away</th>
    <th style="width:20%;">City</th>
    
  </tr>
  <tr>
    <td>08/01/2018</td>
    <td>SPAIN</td>
    <td>16:30 ET</td>
    <td>USA</td>
    <td>BARCELONA</td>
  </tr>
    <tr>
    <td>08/02/2018</td>
    <td>BOLIVIA</td>
    <td>18:30 ET</td>
    <td>PORTUAL</td>
    <td>MADRID</td>
  </tr>
      <tr>
    <td>08/03/2018</td>
    <td>PUERTO RICO</td>
    <td>18:30 ET</td>
    <td>CANADA</td>
    <td>CHICAGO</td>
  </tr>
      <tr>
    <td>08/04/2018</td>
    <td>MEXICO</td>
    <td>19:30 ET</td>
    <td>ENGLAND</td>
    <td>LONDON</td>
  </tr>
</table>

showdev

Durchlaufen Sie mit Ihrem vorhandenen Code die Tabellenzellen, während Sie die Tabellenzeilen durchlaufen.

Unten verstecke ich jede Zeile. Wenn für jede Zeile der Text in einer Zelle mit dem Suchbegriff übereinstimmt, wird diese Zeile angezeigt und die Schleife fährt mit der nächsten Zeile fort.

Ich ignoriere auch den Tabellenkopf, indem ich tBodiesdie Suche auf <tr>Elemente beschränke, die sich innerhalb des ersten befinden <tbody>. Alternativ können Sie <td>vor der Suche überprüfen, ob Elemente in der Zeile vorhanden sind. so etwas wie : if (tds.length) > 0.

function myFunction() {

  // Declare variables 
  var input = document.getElementById("myInput");
  var filter = input.value.toUpperCase();
  var table = document.getElementById("myTable");
  var trs = table.tBodies[0].getElementsByTagName("tr");

  // Loop through first tbody's rows
  for (var i = 0; i < trs.length; i++) {

    // define the row's cells
    var tds = trs[i].getElementsByTagName("td");

    // hide the row
    trs[i].style.display = "none";

    // loop through row cells
    for (var i2 = 0; i2 < tds.length; i2++) {

      // if there's a match
      if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {

        // show the row
        trs[i].style.display = "";

        // skip to the next row
        continue;

      }
    }
  }

}
#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th,
#myTable td {
  text-align: left;
  padding: 12px;
}

#myTable th {
  width: 20%;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header,
#myTable tr:hover {
  background-color: #f1f1f1;
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<table id="myTable">
  <thead>
    <tr class="header">
      <th>Date</th>
      <th>Home</th>
      <th>Time</th>
      <th>Away</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>08/01/2018</td>
      <td>SPAIN</td>
      <td>16:30 ET</td>
      <td>USA</td>
      <td>BARCELONA</td>
    </tr>
    <tr>
      <td>08/02/2018</td>
      <td>BOLIVIA</td>
      <td>18:30 ET</td>
      <td>PORTUAL</td>
      <td>MADRID</td>
    </tr>
    <tr>
      <td>08/03/2018</td>
      <td>PUERTO RICO</td>
      <td>18:30 ET</td>
      <td>CANADA</td>
      <td>CHICAGO</td>
    </tr>
    <tr>
      <td>08/04/2018</td>
      <td>MEXICO</td>
      <td>19:30 ET</td>
      <td>ENGLAND</td>
      <td>LONDON</td>
    </tr>
  </tbody>
</table>

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am
0

Lass mich ein paar Worte sagen

0Kommentare
LoginNach der Teilnahme an der Überprüfung

Verwandte Artikel

Latex Tabelle mehrere Zeilen und mehrere Spalten

Pandas-Datenrahmen: Gruppieren Sie nach Spalten und lassen Sie Duplikate dieser Spalten mehrere Zeilen umfassen

Kombinieren Sie mehrere Zeilen und Spalten in einer einzigen Zeile in SQL

Durchsuchen Sie mehrere Spalten einer Tabelle

So aktualisieren Sie mehrere Zeilen in einer Tabelle (MySQL, PHP, PDO)

So zeigen Sie die Summe aller Zeilen und Spalten in einer Tabelle in Python an

So ändern Sie diesen Code, um nur sichtbare Zeilen und Spalten zu durchsuchen

So wählen Sie Werte mit einer Bedingung für mehrere Spalten und mehrere Zeilen in Pandas aus (Best Practice)

So wählen Sie mehrere Spalten und Zeilen aus

So lassen Sie Benutzer mehrere Zeilen eingeben

SQL - So vermeiden Sie das Einfügen doppelter Zeilen aus einer anderen Tabelle, während mehrere Spalten abgeglichen werden

Wie extrahiere ich mehrere Zeilen aus einer Tabelle basierend auf Werten aus mehreren Spalten aus einer anderen Tabelle und verkette sie dann in SQL?

So durchsuchen Sie mehrere Spalten in der Datenbank mit einer Suchleiste

So filtern Sie mehrere Zeilen in einer SQL-Tabelle anhand von zwei Spalten

MSSQL 2012 - So kombinieren Sie mehrere Zeilen und Spalten zu einer einzigen Zeile

Fügen Sie einer Tabelle mehrere Spalten und Zeilen hinzu

Konvertieren Sie mehrere Zeilen in mehrere Zeilen mit vielen Spalten und Namen aus der ersten Tabelle

Wählen Sie Zeilen aus einer Tabelle aus und verwenden Sie mehrere miteinander verbundene Spalten für die Bestellung

So aktualisieren Sie mehrere Zeilen in einer Tabelle auf MySQL

So durchsuchen Sie mehrere Spalten in einer Tabelle mit jquery oder Javascriptva

So durchsuchen Sie mehrere Spalten nach eindeutigem Text, um diese eindeutigen Zeilen in ein anderes Blatt einzugeben

So kombinieren Sie mehrere Spalten verschiedener Tabellen zu einer Tabelle

In R, So erstellen Sie eine Tabelle mit eindeutigen Zeilen aus einer anderen Tabelle und fügen dann neue Spalten zu einer neuen Tabelle hinzu

So erstellen Sie mehrere Spalten und Zeilen mit Flexbox

Javascript: So durchsuchen Sie mehr als zwei Spalten in einer Tabelle

Postgres - Generieren Sie dynamisch mehrere Zeilen und Spalten und verbinden Sie sie mit einer vorhandenen Tabelle

Zeigen Sie in HTML oder JavaScript die Summe der Spalten und Zeilen in einer Tabelle in der Tabelle an

Wie entferne ich vertikale Linien, wenn ich mehrere Zeilen und mehrere Spalten in einer Tabelle kombiniere?

SO GRUPPIEREN SIE ZEILEN EINER TABELLE MIT SPALTEN-DATUM

TOP Liste

  1. 1

    Wie aktualisiere ich ein Feld in einer Raumdatenbank mit einem Repository und einem Ansichtsmodell?

  2. 2

    Wie füge ich mehrere Spalten in einer Spalte mit derselben Tabelle in SQL Server zusammen?

  3. 3

    Wie kann man Gitterquadrate dazu bringen, die Farbe zu ändern?

  4. 4

    Ich kann nicht verstehen, wie man Go-Code in mehreren Dateien kompiliert

  5. 5

    Zählen Sie die Vorkommen jedes Werts in einem Tupel in Python

  6. 6

    Gibt es eine sauberere Möglichkeit, Konstruktorargumente und Instanzeigenschaften einer Klasse in Typescript zu definieren?

  7. 7

    So implementieren Sie Pushwoosh mit ionic 2

  8. 8

    Wie wird der Wert im Dropdown-Menü basierend auf den ausgewählten Daten / IDs angezeigt?

  9. 9

    Tomcat - Leiten Sie den alten Kontextstamm zum neuen Kontextstamm um

  10. 10

    Ändern Sie den Knotenpfad in das aktuelle Verzeichnis

  11. 11

    So erstellen Sie ein Array von Objekten aus zwei Arrays von Objekten mit einem gemeinsamen Schlüssel - JavaScript

  12. 12

    Rufen Sie die ID aus der Datagrid-Ansicht ab und zeigen Sie die Daten in Textfeldern einem anderen Formular an

  13. 13

    base js: Wie füge ich einem Objekt eine Eigenschaft auf die 'alte' Weise hinzu?

  14. 14

    Ersetze einen Teil einer Zeichenfolge durch eine Pandas-Spalte als Muster

  15. 15

    Blättern Sie auf Radio Click zur Abschnitts-ID

  16. 16

    CBCentralManager wird nach dem Verbinden neu gestartet

  17. 17

    Scherz, wie man eine Funktion verspottet, die von einer verspotteten Funktion zurückgegeben wird

  18. 18

    django-allauth Empfängersignal zum Hinzufügen einer Gruppenberechtigung zum Benutzer bei der Anmeldung

  19. 19

    Tic Tac Toe-Spiel im React-Reset-Button funktioniert nicht

  20. 20

    AQL: Teilweise Übereinstimmung in einer Reihe von Zeichenfolgen

  21. 21

    So summieren Sie die Werte zweier Tabellen und gruppieren sie nach Datum

heißlabel

Archiv