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

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
Empfehlenswerte und aktuelle Quellen sind Selfhtml und MDN:
 
Werbung:

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
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:

1611837701400.png

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.
1611837729095.png

Vielleicht weiß ja jemand von Euch Rat :).

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

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
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

Mitglied
21 Januar 2021
45
0
6
24
Sorry für die verspätete Antwort!

Das Script sieht wie folgt aus:

1612008917768.png


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:

1612008959284.png
 

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
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.
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
Ich nehme an, den Code hast Du von hier:
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

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
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.
 
Werbung:

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
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

Mitglied
21 Januar 2021
45
0
6
24
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

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
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.
 
Werbung:

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
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

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
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>
 
Werbung:

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
Kleine Rückfrage: Funktioniert das Script zum Erweitern der Tabelle bei euch wirklich? Bei mir tut sich da leider nichts.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
Also in meiner Testdatei hat es funktioniert. Wenn bei dir nicht, dann poste noch Mal das HTML der Tabelle und das Javascript.
 

ZK_Crunchy

Mitglied
21 Januar 2021
45
0
6
24
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>
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.263
449
83
68
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

Mitglied
21 Januar 2021
45
0
6
24
Okay, das wundert mich. Dann habe ich einen Fehler eingebaut. Begebe mich auf die Suche. Melde mich, wenn ich den Übeltäter gefunden habe.
 
Werbung: