ComputerBase Menü
Aktuelles

JavaScript Wie realisiere Ich eine Interaktive HTML Tabelle

C

CodeJunkie

Newbie
Registriert
Jan. 2020
Beiträge
4
Hallo allerseits

Ich habe eine Webseite erstellt mit einer Tabelle, die die User Bearbeiten können. Bis hierhin ist alles schön und Gut, nun möchte Ich dass sobald ein User die Tabelle bearbeitet und Preise Einschreibt, im hintergrund ein Total an Preis berechnet. Beim überlegen wie ich dies Realisieren könnte, kam ich auf die Script Sprache Javascript. Aber weiter als Javascript bin Ich nicht gekommen, also meine Frage wie kann ich so etwas realisieren?

Besten Dank im voraus, wer mir helfen kann :).

Hier mal der Source Code:

HTML: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF8" />
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="style.css" />
    <script src="javascript.js" type="text/javascript"></script>
    <title>Verwaltung</title>
  </head>
  <body>
    <section id="banner"></section>
    <section>
      <form>
        <table class="tg">
          <tr>
            <th class="tg-ijr3"></th>
            <th class="tg-ijr3">Anzahl Kontrollen Soll</th>
            <th class="tg-ijr3">Kontrollen Soll Betrag</th>
            <th class="tg-ijr3">Anzahl Kontrollen</th>
            <th class="tg-ijr3">Kontrollen Fakturiert pro Monat</th>
            <th class="tg-ijr3">Anzahl OB</th>
            <th class="tg-ijr3">Einsprachen Fakturiert pro Monat</th>
          </tr>
          <tr>
            <td class="tg-ijr3">Januar</td>
            <td class="tg-gii3"><input type="text" class="eingabe"/></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
          </tr>
          <tr>
            <td class="tg-ijr3">Februar</td>
            <td class="tg-gii3"><input type="text"/>
            </td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
          </tr>
          <tr>
            <td class="tg-ijr3">März</td>
            <td class="tg-gii3"><input type="text" class="eingabe"/></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
          </tr>
          <tr>
            <td class="tg-ijr3">April</td>
            <td class="tg-gii3"><input type="text" class="eingabe"/></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
          </tr>
          <tr>
            <td class="tg-ijr3">Mai</td>
            <td class="tg-gii3"><input type="text" class="eingabe"/></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
          </tr>
          <tr>
            <td class="tg-ijr3">Juni</td>
            <td class="tg-gii3"><input type="text" class="eingabe"/></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
          </tr>
          <tr>
            <td class="tg-ijr3">Juli</td>
            <td class="tg-gii3"><input type="text" class="eingabe"/></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
          </tr>
          <tr>
            <td class="tg-ijr3">August</td>
            <td class="tg-gii3"><input type="text" class="eingabe"/></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
          </tr>
          <tr>
            <td class="tg-ijr3">September</td>
            <td class="tg-gii3"><input type="text"/></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
          </tr>
          <tr>
            <td class="tg-ijr3">Oktober</td>
            <td class="tg-gii3"><input type="text"/></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
          </tr>
          <tr>
            <td class="tg-ijr3">November</td>
            <td class="tg-gii3"><input type="text"/></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
          </tr>
          <tr>
            <td class="tg-ijr3">Dezember</td>
            <td class="tg-gii3"><input type="text"/></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            <td class="tg-gii3"><input type="text" class="eingabe" /></td>
          </tr>
          <tr>
            <td class="tg-ijr3">Total</td>
<!--Hier kommt das Resultat-->
            <td class="tg-gii3"><input type="text" id="summe"/></td>
<!--..................................................-->
            <td class="tg-gii3"></td>
            <td class="tg-gii3"></td>
            <td class="tg-gii3"></td>
            <td class="tg-gii3"></td>
            <td class="tg-gii3"></td>
          </tr>
        </table>
      </form>
    </section>
  </body>
</html>
 
Zuletzt bearbeitet:
Mein Vorschlag wäre folgendermaßen:

1- Du vereinfachst die Klassen ein wenig (optional)
2- Du ordnest semantisch weitere Klassen zu. Wer soll mit wem in Relation gesetzt werden? Entsprechend vergibst Du die Klassen.
3- Du implementierst jQuery oder ein ähnliches Framework und guckst Dich dann dort um nach Aggregatfunktionen, je nachdem was benötigt wird, für Summieren, Faktorieren, Durchschnitte, was weiß ich. Notfalls implementierst Du die selber.

zB jQuery kennt $.each(...). Damit würdest Du alle Elemente einfach zusammensammeln, die die angegebene CSS-Klasse(n) konfiguriert haben, und kannst ein Funktionsobjekt mitgeben, welches dann aus jedem einzelnen Eintrag den lokalen Wert extrahiert. Näheres dazu findest Du in der jQuery Dokumentation.

Andere Möglichkeiten gibt es natürlich immer, und jQuery ist sicherlich keine Pflicht (andere Frameworks auch nicht).
 
  • Gefällt mir
Reaktionen: CodeJunkie
Soll das lokal bearbeitet werden? Ansonsten brauchst du eine Möglichkeit das im Backend auch zu speichern.

Die einfachste Methode wären Listener für die Input-Felder und daraufhin dann JS-Funktionen, die die Berechnungen durchführen und per DOM-Manipulation die Einträge anpassen.
 
Tokolosh schrieb:
Soll das lokal bearbeitet werden? Ansonsten brauchst du eine Möglichkeit das im Backend auch zu speichern.
Zum Vergrößern anklicken....
Lokal sollte es sein, also am schluss kan jeder Mitarbeiter auf diese Webseite per URL und kann es bearbeiten, ich weiss halt nur nicht wie ich die Javascript funktionen zum laufen bringe.. bin was javascript angeht ein newbie. Falls es dir nichts ausmacht meinste kannste mir ein Code Snippet schicken ? Wäre lieb von dir aber auch recht herzliches dankeschön für die rasche antwort
 
Mit lokal meinte ich nicht das Netzwerk, sondern den Browser, in dem das laufen soll.

Worauf ich hinaus wollte war, dass so eine Anwendung mehr erfordert, als Javascript und HTML, weil Javascript in diesem Fall clientseitig ausgeführt wird.

Ohne ein Backend auf dem Webserver wird das mit mehreren Mitarbeiten an mehreren PCs nicht funktionieren.
 
Tokolosh schrieb:
Mit lokal meinte ich nicht das Netzwerk, sondern den Browser, in dem das laufen soll.
Ohne ein Backend auf dem Webserver wird das mit mehreren Mitarbeiten an mehreren PCs nicht funktionieren.
Zum Vergrößern anklicken....

Achso, Ich dachte halt wen Ich zu der Webseite gehe, kann ich die webseite ausfüllen und sie mir dan drucken lassen oder abspeichern lassen, aber wen tab geschlossen wird ist die arbeit futsch. Nicht nett für mitarbeiter aber denke am machbarsten zu realisieren
 
Uff ... :D

Aber dann nimm doch lieber eine Tabelle eines beliebigen Kalkulationsprogramms (Excel, LibreOffice ...) und erstelle dort eine Vorlage.
Warum Zeit in eine Webumsetzung investieren, die nichts mit Web zu tun hat?
 
Drucken ginge. Abspeichern jedoch nicht, weil da ist exakt das von @Tokolosh angesprochene Problem: die Speicheroption fehlt. Wenn das gemäß OP umgesetzt sein würde, dann würde jeder MA das an seinem PC sehen.... aber eben nur sehen, nicht mehr, nicht weniger.

Unter den Umständen ist Excel keine schöne, aber zumindest eine funktionierende Alternative.

Naja, oder Du (oder jemand) baut ein Backend auf einen passenden Webserver, der die Daten in Empfang nimmt, speichert und ggfs. verarbeitet. Aber wenn da noch nichts da ist (und Kompetenzen auch nicht) dann ist Excel definitiv der gangbarere Weg.
 
Tokolosh schrieb:
Uff ... :D

Aber dann nimm doch lieber eine Tabelle eines beliebigen Kalkulationsprogramms (Excel, LibreOffice ...) und erstelle dort eine Vorlage.
Warum Zeit in eine Webumsetzung investieren, die nichts mit Web zu tun hat?
Zum Vergrößern anklicken....

ich wollte es Webbasiert machen weil in Excel ich ein programm geschrieben habe aber ich da ein Laufzeitfehler 13 habe und nicht erkenne warum Ich den fehler bekomme, Ich habe nur herausgefunden von wo ungefähr der Code stammt aber nicht warum er fehler auspuckt..
Eigentlich bin ich von der berufung her Software Entwickler aber dieses VBA verstehe ich nicht so recht.
Der Klue ist.. mit java hätte ich das programm schnell gecoded allerdings ist das eine Sicherheitsfirma und die einzigen programme die diese aktzeptiert sind mit vba "versteckte" programme.
Hier mal der Code von wo ich den fehler bekomme im Excel Programm, falls du oder andere sich damit auskennen

Code: 
Option Explicit
Private Sub Workbook_Open()
    ufbudget.Show
End Sub
 
Hey CodeJunkie!

Hier ein Beispiel, wie "interaktiv" der Wert geupdated wird (zumindest die erste Spalte).
Benutzt wurde ausschließlich pure JavaScript:

HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF8" />
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="style.css" />
    <script src="javascript.js" type="text/javascript"></script>
    <title>Verwaltung</title>
    <style>
        /* Chrome, Safari, Edge, Opera */
        input[data-control-debit]::-webkit-outer-spin-button,
        input[data-control-debit]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[data-control-debit][type=number] {
            -moz-appearance:textfield;
        }
    </style>
</head>
<body>
<section id="banner"></section>
<section>
    <form>
        <table class="tg">
            <tr>
                <th class="tg-ijr3"></th>
                <th class="tg-ijr3">Anzahl Kontrollen Soll</th>
                <th class="tg-ijr3">Kontrollen Soll Betrag</th>
                <th class="tg-ijr3">Anzahl Kontrollen</th>
                <th class="tg-ijr3">Kontrollen Fakturiert pro Monat</th>
                <th class="tg-ijr3">Anzahl OB</th>
                <th class="tg-ijr3">Einsprachen Fakturiert pro Monat</th>
            </tr>
            <tr>
                <td class="tg-ijr3">Januar</td>
                <td class="tg-gii3"><input type="number" data-control-debit class="eingabe"/></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            </tr>
            <tr>
                <td class="tg-ijr3">Februar</td>
                <td class="tg-gii3"><input type="number" data-control-debit class="eingabe"/></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            </tr>
            <tr>
                <td class="tg-ijr3">März</td>
                <td class="tg-gii3"><input type="number" data-control-debit class="eingabe"/></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            </tr>
            <tr>
                <td class="tg-ijr3">April</td>
                <td class="tg-gii3"><input type="number" data-control-debit class="eingabe"/></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            </tr>
            <tr>
                <td class="tg-ijr3">Mai</td>
                <td class="tg-gii3"><input type="number" data-control-debit class="eingabe"/></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            </tr>
            <tr>
                <td class="tg-ijr3">Juni</td>
                <td class="tg-gii3"><input type="number" data-control-debit class="eingabe"/></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            </tr>
            <tr>
                <td class="tg-ijr3">Juli</td>
                <td class="tg-gii3"><input type="number" data-control-debit class="eingabe"/></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            </tr>
            <tr>
                <td class="tg-ijr3">August</td>
                <td class="tg-gii3"><input type="number" data-control-debit class="eingabe"/></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            </tr>
            <tr>
                <td class="tg-ijr3">September</td>
                <td class="tg-gii3"><input type="number" data-control-debit class="eingabe"/></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            </tr>
            <tr>
                <td class="tg-ijr3">Oktober</td>
                <td class="tg-gii3"><input type="number" data-control-debit class="eingabe"/></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            </tr>
            <tr>
                <td class="tg-ijr3">November</td>
                <td class="tg-gii3"><input type="number" data-control-debit class="eingabe"/></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            </tr>
            <tr>
                <td class="tg-ijr3">Dezember</td>
                <td class="tg-gii3"><input type="number" data-control-debit class="eingabe"/></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
                <td class="tg-gii3"><input type="text" class="eingabe" /></td>
            </tr>
            <tr>
                <td class="tg-ijr3">Total</td>
                <!--Hier kommt das Resultat-->
                <td class="tg-gii3"><input type="text" id="summe"/></td>
                <!--..................................................-->
                <td class="tg-gii3"></td>
                <td class="tg-gii3"></td>
                <td class="tg-gii3"></td>
                <td class="tg-gii3"></td>
                <td class="tg-gii3"></td>
            </tr>
        </table>
    </form>
</section>
<script>
    function updateTotal(e) {
        let sumObject = document.querySelector("#summe");
        let totalSum = 0;
        document.querySelectorAll("[data-control-debit]").forEach(element => totalSum += parseInt(element.value || 0));
        sumObject.value = totalSum;
    }
    window.addEventListener("DOMContentLoaded", (event) => {
        document.querySelectorAll("[data-control-debit]").forEach((element) => {
            element.addEventListener("keyup", updateTotal);
        });
    });
</script>
</body>
</html>

P.S. die Ergebnisse sind "Ganzzahlen". Da JavaScript nicht streng Typisiert ist, wirst du hier keine Casts finden!

LG
danisrb
 
CodeJunkie schrieb:
allerdings ist das eine Sicherheitsfirma und die einzigen programme die diese aktzeptiert sind mit vba "versteckte" programme.
Zum Vergrößern anklicken....
Was zur Hölle ... ?!
CodeJunkie schrieb:
ich wollte es Webbasiert machen
Zum Vergrößern anklicken....
Aber warum? Du möchtest doch nur ein paar Spalten mit Daten füllen, worauf die Werte in anderen Spalten aktualisiert werden und anschließend die Tabelle ausdrucken? Dafür ist doch Excel wunderbar geeignet. VBA brauchst du dazu auch nicht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

CyborgBeta
CSS HTML-Tabelle aus DIVs, aber letzte "Zelle" mit auto width?
Antworten
11
Aufrufe
726
floq0r
floq0r
I
Formatierung simple HTML Tabelle
Antworten
4
Aufrufe
461
ipod86
I
H
PHP/HTML Tabelle exportieren
Antworten
2
Aufrufe
1.464
haunt
H
E
HTML Tabelle aus XML erzeugen
Antworten
2
Aufrufe
4.603
empsim
E
vegagamer
HTML Tabelle mit Daten aus SQL Datenbank ergänzen
Antworten
11
Aufrufe
2.775
Raijin
Raijin
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 160 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz