So summieren Sie eine Tabelle mit JavaScript

Mit der Entwicklung des Internets müssen immer mehr Websites Tabellen zur Anzeige von Daten verwenden. In Tabellen ist die Summierung eine sehr grundlegende Operation. In JavaScript können wir Schleifen verwenden, um die Funktionalität der Tabellensummierung zu implementieren. In diesem Artikel wird erläutert, wie Tabellen mithilfe von JavaScript summiert werden.

HTML-Tabellenstruktur

Bevor wir das Summieren von Tabellen vorstellen, wollen wir zunächst die Tabellenstruktur in HTML verstehen.

Name	Alter	Erfolge
Xiao Ming	18	85
Xiaohong	19	90
Xiao Gang	20	80

Wie oben gezeigt, besteht eine einfache HTML-Tabelle aus Elementen wie table, thead, tbody, tr, th und td.

Unter diesen repräsentiert table die gesamte Tabelle, thead repräsentiert den Tabellenkopf, tbody repräsentiert den Tabellenkörper, tr repräsentiert eine Datenzeile, th repräsentiert die Headerzelle und td repräsentiert die Datenzelle.

JavaScript-Tabellensummierungsimplementierung

Als nächstes stellen wir vor, wie Sie JavaScript verwenden, um die Tabellensummierungsfunktion zu implementieren.

Zuerst müssen wir die Datenzellen in der Tabelle finden, die summiert werden müssen. Im obigen Beispiel müssen wir die Noten summieren. Wir können den folgenden Code verwenden, um die Score-Zellen abzurufen:

const scores = document.querySelectorAll('table tbody tr td:nth-child(3)');

Im obigen Code kann die Funktion querySelectorAll alle Tabellen abrufen td-Element in . Darunter bedeutet :nth-child(3), das dritte td-Element jeder Zeile abzurufen, also die Notenzelle.

Als nächstes müssen wir die erhaltenen Notenzellen durchlaufen und jeden Wert addieren. Der Code lautet wie folgt:

let sum = 0;
scores.forEach((score) => {
sum += Number(score.innerText);
});

Im obigen Code verwenden wir die forEach-Funktion: Alle Klassenzellen werden durchlaufen und jeder Wert wird in der Summenvariablen akkumuliert. Es ist zu beachten, dass innerText einen Wert vom Typ „String“ zurückgibt und daher die Funktion „Number“ verwenden muss, um ihn in einen numerischen Typ umzuwandeln.

Zuletzt müssen wir nur noch den Wert der Summe auf der Seite anzeigen. Der Code lautet wie folgt:

const result = document.createElement('div');
result.innerText = 总分：${sum};
document.body.append(result);

Durch den obigen Code können wir die angegebenen Spalten implementieren in der Tabelle Summenfunktion.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit JavaScript Summenoperationen für HTML-Tabellen durchführen, indem Sie die zu summierenden Elemente finden, Durchlauf- und Akkumulationsoperationen verwenden und schließlich die Berechnungsergebnisse auf der Seite anzeigen, eine einfache Summenoperation wird umgesetzt.

Die Bedienung von Tabellen ist ein wesentlicher Bestandteil der Webentwicklung, und die Beherrschung dieses Wissens ist entscheidend für die Verbesserung der Entwicklungseffizienz. Der in diesem Artikel vorgestellte Inhalt kann den Lesern helfen, ein tieferes Verständnis für die Anwendung von JavaScript in der tabellarischen Datenverarbeitung zu erlangen und den Lesern auch dabei zu helfen, ein tieferes Verständnis für hervorragende praktische Ideen für die JavaScript-Entwicklung zu erlangen, um so hervorragende Anwendungen besser entwickeln zu können.

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