Statusspalte in einer Webanwendung dynamisch aktualisieren

1. Grundstruktur einer Tabelle mit Statusspalte
2. So funktioniert die dynamische Aktualisierung per JavaScript
3. Erweiterte Szenarien

In vielen Webanwendungen gibt es Tabellen, die beispielsweise den Status von Einträgen anzeigen. Um diese Statusspalte dynamisch zu aktualisieren, also den Status während der Nutzung der Seite ohne Neuladen verändern zu können, wird JavaScript verwendet. Dabei greift man mittels DOM-Manipulation gezielt auf die Zellen der Statusspalte zu und ändert deren Inhalte oder CSS-Klassen, damit eine visuelle Rückmeldung erfolgt.

Grundstruktur einer Tabelle mit Statusspalte

Zunächst benötigt man eine Tabelle, in der die Statuswerte stehen. Ein typisches Beispiel sieht so aus:

So funktioniert die dynamische Aktualisierung per JavaScript

Um den Status dynamisch zu aktualisieren, verwendet man JavaScript, welches zum Beispiel per Ereignis-Handler (z.B. Klick auf einen Button oder eine andere Benutzeraktion) ausgelöst wird. Das Skript findet die passende Tabellenzelle und verändert den Text und optional die CSS-Klassen zur besseren Darstellung.

Hier ein einfaches Beispiel, das den Status der Benutzer zyklisch ändert:

Erweiterte Szenarien

In echten Webanwendungen kommen meist Daten von einem Server. Um dort den Status aktuell zu halten, wird häufig asynchron per fetch() oder XMLHttpRequest eine Anfrage gesendet, die neue Statusdaten zurückgibt. Diese Daten werden dann per JavaScript geparst und die Tabelle entsprechend aktualisiert. Zusätzlich kann man mit Frameworks wie React, Vue oder Angular noch effizientere Methoden nutzen, um den Status zu verwalten und darzustellen.

Für einfache Projekte ohne Framework reicht die vorgestellte Methode der DOM-Manipulation vollkommen aus: Identifizieren der richtigen Tabellenzelle, Ändern der Inhalte und CSS-Klassen, und schon werden Statusupdates dynamisch für den Nutzer sichtbar.