So schreiben Sie eine Tabelle in Javascript-Front-End-Fragen und Antworten-php.cn

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.

Erstellung und Änderung von Basistabellen

Tabellen bestehen aus den HTML-Tags

, , , , ,

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>

Nach dem Login kopieren

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";

Nach dem Login kopieren

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

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);

Nach dem Login kopieren

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.

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;
      }
    }
  }
}

Nach dem Login kopieren

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.

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";
      }
    }
  }
}

Nach dem Login kopieren

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!

Quelle：php.cn

Vorheriger Artikel：Javascript kann nur im Browser ausgeführt werden Nächster Artikel：Javascript druckt Division und Rest

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors