So schreiben Sie eine Tabelle in Javascript

In der Frontend-Entwicklung sind Tabellen eines der häufigsten Elemente. Mithilfe von JavaScript können Tabellen dynamisch generiert werden, was uns die Steuerung und Bedienung von Tabellen erleichtert. Hier sind einige gängige Methoden und Techniken, die Ihnen helfen, JavaScript-Tabellen besser zu schreiben.

1. Erstellung und Änderung von Basistabellen

Tabellen bestehen aus den HTML-Tags f5d188ed2c074f8b944552db028f98a1, ae20bdd317918ca68efdc799512a9b39, 92cee25da80fac49f6fb6eec5fd2c22a, 06669983c3badb677f993a8c29d18845, a34de1251f0d9fe1e645927f19a896e8, b4d429308760b6c2d20d6300079ed38e td> ; zu definieren. Wenn Sie eine Tabelle dynamisch erstellen möchten, können Sie die Tabelle durch Hinzufügen dieser Tags generieren.

Das Folgende ist ein einfaches Beispiel:

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

Nachdem Sie das Formular erstellt haben, können Sie es ändern. Sie können beispielsweise neue Zeilen und Spalten hinzufügen:

var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "Bob";
cell2.innerHTML = "40";
cell3.innerHTML = "Chicago";

Der obige Code fügt der Tabelle eine neue Zeile hinzu und füllt die Informationen in jede Zelle ein.

2. Tabellen basierend auf Daten generieren

In der tatsächlichen Entwicklung müssen wir möglicherweise Tabellen basierend auf einigen Daten dynamisch generieren. Angenommen, wir haben ein JSON-Array, das einige Schülerinformationen enthält, dann können wir durch Durchlaufen des Arrays dynamisch eine Tabelle generieren.

Das Folgende ist ein Beispiel:

var students = [
  {name: "John", age: 25, city: "New York"},
  {name: "Jane", age: 30, city: "Los Angeles"},
  {name: "Bob", age: 40, city: "Chicago"}
];
var table = document.createElement("table");
var thead = document.createElement("thead");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
for (var key in students[0]) {
  var th = document.createElement("th");
  th.innerHTML = key.charAt(0).toUpperCase() + key.slice(1);
  tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
for (var i = 0; i < students.length; i++) {
  var tr = document.createElement("tr");
  for (var key in students[i]) {
    var td = document.createElement("td");
    td.innerHTML = students[i][key];
    tr.appendChild(td);
  }
  tbody.appendChild(tr);
}
table.appendChild(tbody);
document.body.appendChild(table);

Der obige Code erstellt zunächst ein DOM-Element, das eine Tabelle enthält, und erstellt dann den Tabellenkopf bzw. den Tabellenkörper. Während des Durchlaufens des JSON-Arrays werden Elemente Zeile für Zeile entsprechend dem Format des Tabellenkopfes und Tabellenkörpers hinzugefügt.

Es ist zu beachten, dass der fett gedruckte Teil im Code zur Großschreibung des ersten Buchstabens jedes Schlüssels verwendet wird.

3. Tabellensortierung

Tabellensortierung ist einer der häufigsten Vorgänge. Die Tabellensortierung kann über JavaScript erreicht werden.

Das Folgende ist ein Beispiel:

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[n];
      y = rows[i + 1].getElementsByTagName("td")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

Der obige Code implementiert eine Funktion, die nach einer bestimmten Spalte der Tabelle sortiert. Der übergebene Parameter n stellt die Anzahl der zu sortierenden Spalten dar.

4. Tabellenfilterung

Tabellenfilterung ist ebenfalls ein häufiger Vorgang. Die Daten in der Tabelle können über JavaScript gefiltert werden.

Das Folgende ist ein Beispiel:

function filterTable() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

Der obige Code implementiert eine Funktion, die Tabellendaten basierend auf dem Wert im Eingabefeld filtert. Durch Abrufen des Werts im Benutzereingabefeld und anschließendes Durchlaufen des Inhalts jeder Zelle in der Tabelle bleibt die Datenzeile erhalten, wenn der Inhalt den vom Benutzer eingegebenen Wert enthält, andernfalls wird sie ausgeblendet.

Zusammenfassend sind die oben genannten einige häufig verwendete JavaScript-Codes, die Ihnen helfen, Tabellen bequemer zu steuern und zu bedienen. Natürlich gibt es in der tatsächlichen Entwicklung noch mehr Techniken und Methoden, und ich hoffe, Sie können sie mehr erkunden und ausprobieren.

Das obige ist der detaillierte Inhalt vonSo schreiben Sie eine Tabelle in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!