Notentabelle

<!DOCTYPE html>
<html>
<head>
    <title>Notentabelle</title>
    <meta charset="UTF-8" />
    <style>
        table {
            border-collapse: collapse;
        }

        table, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <button id="add-subject">Fach hinzufügen</button>
    <button id="add-category">Kategorie hinzufügen</button>

    <table id="grades"></table>

    <script>
        var addSubject = document.getElementById("add-subject");
        var addCategory = document.getElementById("add-category");

        var gradesTable = document.getElementById("grades");

        var rows = [];
        var columnCount = 1;

        // neues Fach (Zeile) hinzufügen
        addSubject.addEventListener("click", function() {
            var newRow = document.createElement("tr");

            // so viele Zellen pro Zeile einfügen, wie Spalten existieren
            for(var i = 0; i < columnCount; i++) {
                var newCell = document.createElement("td");
                // Zelleninhalt soll bearbeitbar sein
                newCell.contentEditable = true;
                newCell.textContent = "<Eingabe>";
                // neue Zelle in the Zeile einfügen
                newRow.appendChild(newCell);
            }

            gradesTable.appendChild(newRow);

            // neue Zeile in eine Liste einfügen
            rows.push(newRow);
        });

        // neue Kategorie (Spalte) hinzufügen
        addCategory.addEventListener("click", function() {
            // hinter jeder Zeile eine weitere Zelle einfügen
            for(var i = 0; i < rows.length; i++) {
                var newCell = document.createElement("td");
                // Zelleninhalt soll bearbeitbar sein
                newCell.contentEditable = true;
                newCell.textContent = "<Eingabe>";
                // neue Zelle in the Zeile einfügen
                rows[i].appendChild(newCell);
            }

            // Spaltenanzahl um 1erhöhen
            columnCount++;
        });
    </script>
</body>
</html>