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

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

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.
 
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>
 
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!
 
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>
 
Okay, das wundert mich. Dann habe ich einen Fehler eingebaut. Begebe mich auf die Suche. Melde mich, wenn ich den Übeltäter gefunden habe.
 
Hmm, also die einzige Fehlermeldung, die ich erhalte, ist im Bezug auf die erste Funktion. Diese funktioniert aber einwandfrei.

Das dynamische Tabellen erweitern funktioniert nach wie vor leider nicht. Falls Jemand noch eine Idee hat, gerne melden. Wollte das Formular heute um 16:00 Uhr einreichen.
 
Okay, also die Funktion an sich funktioniert. Habe einfach mal einen neuen Button hinzugefügt und die Funktion dort dran geklemmt. Jetzt ist die Frage, wieso ich nicht beide Funktionen mit einem Button aufrufen kann.
 
Code: 
<input id="moreBtn" value="mehr" onclick="newDay(this); neueZeile(this);" type="button"></input>
        <input id="moreBtn2" value="Tabelle mehr" onclick="neueZeile(this);" type="button"></input>
 
Vielleicht ist meine Idee mit der Tabelle als Ansatz auch falsch. Was ich in das HTML Formular ist folgendes:

Für jeden Reisetag, der eingegeben wird, soll am Ende des Formulars eine Summierung des Reisetags stattfinden. Ebenso sollen alle angegebenen Reisetage als Gesamtsumme gezeigt werden.
 
Das ist die Fehlermeldung die ich erhalte:

Code: 
Uncaught TypeError: Cannot read property 'append' of null
    at newDay (Reisekostenabrechnung Upload Neue Struktur.html:240)
    at HTMLInputElement.onclick (Reisekostenabrechnung Upload Neue Struktur.html:352)

Betroffene Zeilen:

Code: 
//Button wieder unter das Template platzieren
document.querySelector('.Feld4').append(addBtn);

Code: 
<input id="moreBtn" value="mehr" onclick="newDay(this); neueZeile(this);" type="button"></input>
 
Code: 
<script>
            let nrDay = 1;
      
            function newDay(addBtn){
              
                //Nummer des Tages erhöhren
                nrDay++;
              
                //HTML aus dem Template lesen
                let html = document.getElementById('new_passage').innerHTML;
              
                //Alle Vorkommen des Platzhalters, durch Nummer des Tages ersetzen
                html = html.replace(/\{nrtag\}\}/g, nrDay);
              
                //Template einfügen
                //document.querySelector('.Feld3').insertAdjacentHTML('afterend', html);
              
                //Button wieder unter das Template platzieren
                document.querySelector('#moreBtn').insertAdjacentHTML('beforebegin', html);
              
            }
  
        </script>

Habe die Zeile Code unter //Template einfügen auskommentiert. Nun wird nur noch 1x das Template eingefügt und es kommt keine Fehlermeldung mehr. Dadurch werden nun auch beide Funktionen per einmaligen Knopfdruck ausgeführt.

Vielen Dank für deine erneute Hilfe! :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben