(Gelöst) HTML Formular um einen Bereich dynamisch erweitern + ID Vergabe

Sempervivum · 26 Januar 2021

Empfehlenswerte und aktuelle Quellen sind Selfhtml und MDN:

SELFHTML

www.selfhtml.org

Webtechnologien für Entwickler | MDN

Das offene Web bietet unglaubliche Möglichkeiten für Entwickler, die Webseiten oder Onlineanwendungen erstellen möchten. Um diese Technologien voll ausschöpfen zu können, müssen Sie wissen, wie man sie verwendet. Unten finden Sie Links zu unseren Dokumentationen zum Thema Webtechnologien.

developer.mozilla.org

ZK_Crunchy · 28 Januar 2021

Vielen Dank!

Ich bin seit heute wieder am Formular tätig. Habe nun auch das Erstellen des ersten Reisetags mit in die Funktion übernommen. Nun wollte ich noch ein Fieldset erstellen, indem die Summe der Reisetag aufgeführt wird. Dort ist eine Tabelle vorhanden, in der in jeder Zeile ein Reisetag steht. Wenn man jetzt auf den Button "mehr" klickt, entsteht ja ein neuer Reisetag-Bereich. Dazu würde ich jetzt gerne auch in der Gesamt-Tabelle eine weitere Zeile einfügen lassen, in der dann die Kosten summiert stehen.

Jetzt habe ich folgendes Problem: Nachdem ich ein weiteres Fieldset erstellt habe, wird ein neuer Reisetag (nach klicken auf "mehr") unter dem neuen Fieldset erstellt. Das sind dann so aus:

Ich habe versucht in dieser Zeile der Funktion die Position anzupassen, leider ohne Erfolg. Entweder entsteht der neue Bereich ganz unten oder als erstes im HTML Dokument.

Vielleicht weiß ja jemand von Euch Rat :).

P.S.: Die Tabelle ist noch nicht fertig. Also bitte nicht meckern

ZK_Crunchy · 28 Januar 2021

Kommando zurück! Habe es selber lösen können!

Sempervivum · 28 Januar 2021

Super, dass Du die Lösung gefunden hast. Wie sieht diese denn aus? Ich hatte das ja gelöst, dass ich nach dem Einfügen den Button durch appendChild wieder nach hinten verschoben habe. Inzwischen habe ich gesehen, dass man bei dem insertAdjacentHTML auch die Position 'beforebegin' verwenden kann, dann spart man sich diesen Schritt.

ZK_Crunchy · 30 Januar 2021

Sorry für die verspätete Antwort!

Das Script sieht wie folgt aus:

Und zwar habe ich einfach das 'form' Argument gegen die IDs des Fieldsets getauscht. Nun wird das neue Fieldset unter dem bestehen erstellt und der Button wieder darunter platziert. Sieht dann in der Praxis so aus:

ZK_Crunchy · 30 Januar 2021

Aber wenn ich gerade schon hier bin. Ich versuche gerade die unten zu sehen Tabelle dynamisch zu erweitern. Grund dafür ist, dass ich die einzelnen Reisetage, die oben erstellt werden, unten summiert darstellen möchte. So hat man eine Übersicht der Kosten auf einen Blick.

Ich habe mich versucht verschiedenen Google Funktionen zu bedienen. Leider ohne Erfolg.

ZK_Crunchy · 30 Januar 2021

So sieht die Funktion aktuell aus. Mehr oder weniger Marke Eigenbau. Funktioniert nur leider nicht ._.

Sempervivum · 30 Januar 2021

Ich nehme an, den Code hast Du von hier:

JavaScript/Tutorials/Monatskalender – SELFHTML-Wiki

wiki.selfhtml.org

Genau so wie sie dort schreiben benutze ich auch vorwiegend createElement oder ein Template, aber so sollte es natürlich auch gehen.
In dem Code, den Du oben gepostet hast, fehlt unten eine schließende geschweifte Klammer. Daher wird das nicht funktionieren. Oder ist sie nur beim Kopieren/Einfügen verloren gegangen? Wenn ja, dann müsste man das Ganze im Zusammenhang sehen.
BTW: Code besser nicht als Screenshot posten sondern als Text und in Codetags setzen. Das kleine Menüsymbol in der Werkzeugleiste oben und dann </>

Sempervivum · 30 Januar 2021

PS: Dieses kommt mir auch merkwürdig vor:
getElementById('.table1')
Dass eine ID vorne einen Punkt hat, wäre sehr ungewöhnlich. Hast Du das mit querySelektor vermengt und die Tabelle hat eine Klasse "table1"?
Am besten mal das HTML dieser Tabelle posten.

ZK_Crunchy · 30 Januar 2021

Oh, okay. Nächstes mal schicke ich den Code nicht als Screenshot. Ja, auf der Seite war ich unter anderem auch. Hatte mir mehrere Sachen angeguckt, um nicht auf etwas altmodisches reinzufallen.

Das mit der Klammer gucke ich mir sofort an!

Das mit . und der ID habe ich wohl wirklich vermischt. Hatte einfach mal ein paar einfache Dinge getestet um das "Script" ans Laufen zu bekommen.

ZK_Crunchy · 30 Januar 2021

Okay. Die Klammer ist nur auf den Screenshot fehlend.

Der Code sieht so aus:

Funktion:

Code:

<script>
          
            function neueZeile() {
              
                const tabelle = document.getElementById('table1');
                const reihe = tabelle.insertRow(0);
              
                for (var i = 0; i < 7; i++) {
                  
                    let inhalt = 'Zelle ' + (i + 1),
                        zelle = reihe.insertCell();
                      
                    zelle.innerHTML = inhalt;
                  
                }
              
              
            }

Tabelle:

Code:

<fieldset style="width: 900px;" class="Feld5" id="Gesamt">
            <table width="900" border="0">
                <tr bgcolor="31759C"><td>
                    <font size="5" face="Arial"><b>Gesamtübersicht:</b></font>
                </td></tr>
            </table>
          
            <table border="1" id="table1">
          
                <tr><td>
                    <font face="Arial"><b> Reisetage </b></font>
                </td><td>
                    <font face="Arial"><b> Verpflegung </b></font>
                </td><td>
                    <font face="Arial"><b> Teilnahmegebühren </b></font>
                </td><td>
                    <font face="Arial"><b> Fahrtkosten </b></font>
                </td>
                </tr>
            </table>
          
            <table border="1">
                <tr><td width="75px">
                    <font face="Arial"><b> Gesamt: </b></font>
                </td><td width="95px">
                </td><td width="150px">
                </td><td width="93px">
              
              
              
                </tr>
            </table>
        </fieldset>

Sempervivum · 30 Januar 2021

So funktioniert die Funktion wenn ich sie aufrufe, wenn man davon absieht, dass sie mehr Spalten einfügt als in der Basistabelle vorhanden sind.
Verbesserungsvorschläge:

Ich nehme an, Du willst die Zeile jeweils am Ende anfügen? In dem Fall musst Du -1 als Parameter für insertRow angeben.
Tabelle vollständig angeben mit tHead und tBody. Tut man das nicht, kommt es manchmal zu unerwarteten Ergebnissen.

Für dieses:

Code:

            <table width="900" border="0">                <tr bgcolor="31759C"><td>
<font size="5" face="Arial"><b>Gesamtübersicht:</b></font>
</td></tr>
</table>

besser ein h-Tag verwenden.

ZK_Crunchy · 30 Januar 2021

Ja, genau. Ich möchte die Zeilen am Ende einfügen. Auf den Screenshot sind quasi 2 Tabellen direkt übereinander zu sehen. Die obere Tabelle soll um eine Zeile erweitert werden. Ich habe die Funktion an diesen Button gehangen:

Code:

<input id="moreBtn" value="mehr" onclick="newDay(this);" onclick="neueZeile(this);" type="button"></input>

Beim drücken erweitert sich wie gehabt das Formular. Jedoch nicht die Tabelle.

Das mit der -1 Row teste ich morgen früh direkt und gebe Feedback!

Sempervivum · 30 Januar 2021

Beim drücken erweitert sich wie gehabt das Formular. Jedoch nicht die Tabelle.

Das onclick darfst Du nur einmal notieren und innerhalb beide Funktionen aufrufen:

Code:

<input id="moreBtn" value="mehr" onclick="newDay(this); neueZeile(this);" type="button"></input>

ZK_Crunchy · 31 Januar 2021

Oh, wow. Danke! Ein seltener, aber dennoch blöder Fehler....

ZK_Crunchy · 1 Februar 2021

Kleine Rückfrage: Funktioniert das Script zum Erweitern der Tabelle bei euch wirklich? Bei mir tut sich da leider nichts.

Sempervivum · 1 Februar 2021

Also in meiner Testdatei hat es funktioniert. Wenn bei dir nicht, dann poste noch Mal das HTML der Tabelle und das Javascript.

ZK_Crunchy · 1 Februar 2021

Code:

<script>
            
            function neueZeile() {
                
                const tabelle = document.getElementById('table1');
                const reihe = tabelle.insertRow(-1);
                
                for (var i = 0; i < 7; i++) {
                    
                    let inhalt = 'Zelle ' + (i + 1),
                        zelle = reihe.insertCell();
                        
                    zelle.innerHTML = inhalt;
                    
                }
                
                
            }
            
            
            
        </script>

Code:

<fieldset style="width: 900px;" class="Feld5" id="Gesamt">
            <table width="900" border="0">
                <tr bgcolor="31759C"><td>
                    <font size="5" face="Arial"><b>Gesamtübersicht:</b></font>
                </td></tr>
            </table>
            
            <table border="1" id="table1">
            
                <tr><td>
                    <font face="Arial"><b> Reisetage </b></font>
                </td><td>
                    <font face="Arial"><b> Verpflegung </b></font>
                </td><td>
                    <font face="Arial"><b> Teilnahmegebühren </b></font>
                </td><td>
                    <font face="Arial"><b> Fahrtkosten </b></font>
                </td>
                </tr>
            </table>
            
            <table border="1">
                <tr><td width="75px">
                    <font face="Arial"><b> Gesamt: </b></font>
                </td><td width="95px">
                </td><td width="150px">
                </td><td width="93px">
                
                
                
                </tr>
            </table>
        </fieldset>

Sempervivum · 1 Februar 2021

Wenn ich das isoliert teste, funktioniert es einwandfrei:

Code:

    <fieldset style="width: 900px;" class="Feld5" id="Gesamt">
        <table width="900" border="0">
            <tr bgcolor="31759C">
                <td>
                    <font size="5" face="Arial"><b>Gesamtübersicht:</b></font>
                </td>
            </tr>
        </table>

        <table border="1" id="table1">

            <tr>
                <td>
                    <font face="Arial"><b> Reisetage </b></font>
                </td>
                <td>
                    <font face="Arial"><b> Verpflegung </b></font>
                </td>
                <td>
                    <font face="Arial"><b> Teilnahmegebühren </b></font>
                </td>
                <td>
                    <font face="Arial"><b> Fahrtkosten </b></font>
                </td>
            </tr>
        </table>

        <table border="1">
            <tr>
                <td width="75px">
                    <font face="Arial"><b> Gesamt: </b></font>
                </td>
                <td width="95px">
                </td>
                <td width="150px">
                </td>
                <td width="93px">
                </td> <!-- dieses schliessende fehlte -->
            </tr>
        </table>
    </fieldset>
    <script>

        function neueZeile() {

            const tabelle = document.getElementById('table1');
            const reihe = tabelle.insertRow(-1);

            for (var i = 0; i < 7; i++) {
                let inhalt = 'Zelle ' + (i + 1),
                    zelle = reihe.insertCell();
                zelle.innerHTML = inhalt;
            }
        }
        neueZeile();
    </script>

In der 3. Tabelle fehlte ein schließendes </td>

ZK_Crunchy · 1 Februar 2021

Okay, das wundert mich. Dann habe ich einen Fehler eingebaut. Begebe mich auf die Suche. Melde mich, wenn ich den Übeltäter gefunden habe.

(Gelöst) HTML Formular um einen Bereich dynamisch erweitern + ID Vergabe

Senior HTML'ler

Mitglied

Mitglied

Senior HTML'ler

Mitglied

Mitglied

Mitglied

Senior HTML'ler

Senior HTML'ler

Mitglied

Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied

Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied