HTML Tabelle befüllen mit JavaScript Klassenfunktion

  • Hallo ihr Lieben!


    Ich habe eine Frage bezüglich eines HTML Programms in Verbindung mit einem JavaScript Event. In der HTML Datei ist bereits eine leere Tabelle vordefiniert. In diese soll ich nun die Daten eines bestimmten Elements (einer Visitenkarte) eines Arrays einfügen. Die Auswahl des Element aus dem Array funktioniert, allerdings erschließt sich mir nicht, wie ich es schaffe, die entsprechenden Werte des Elements in die HTML Tabelle zu kopieren? Ich soll dafür eine Funktion der Elementenklasse benutzen.

    Diese Programmteile habe ich bereits in der html datei:


    let domObjArr = document.getElementsByClassName('Visitenkarte');

    for(let i=0; i < domObjArr.length; i++)

    domObjArr[i].addEventListener('click', function(){

    domObjArr[i].showVisitenkarte();

    });


    und diesen in der Klasse Visitenkarte:

    showVisitenkarte() {

    let str= '';

    str = str + document.getElementByID("die jeweilige ID").innerHTML = this.name;

    str = str + document.getElementByID("die jeweilige ID").innerHTML = this.adresse;

    str = str + document.getElementByID("die jeweilige ID").innerHTML = this.telefonnr;


    return str;

    }


    Leider funktioniert diese Idee nicht. Könnte mir jemand einen anderen Hinweis geben?

    Liebe Grüße!!:)

  • Ich würde das nicht mit IDs aufziehen, denn dann bist Du davon abhängig, dass die Tabellenzellen IDs haben. Du kannst problemlos auf die Zeilen und Zellen der Tabelle mit Indizes zugreifen, diese Demo zeigt es:

    Code
                const rows = document.querySelector('table').rows;
                for (let i = 0; i < rows.length; i++) {
                    const theRow = rows[i];
                    for (let j = 0; j < theRow.cells.length; j++) {
                        const theCell = theRow.cells[j];
                        console.log(theCell.textContent);
                    }
                }

    Offene Frage: Wie wird die Zeile ausgewählt? Immer die erste Zeile füllen, die noch nicht belegt istß

  • Danke für die Antwort! Was bedeutet querySelector? Ich bin leider noch ein totaler Anfänger was JS und HTML angeht.

    Woher weiß das Prorgramm, welche Daten es ausgeben soll? Durch das j würde man durch die einzelnen Spalten voran gehen oder? und rows[i] wäre die Visitenkarte, die ich angeklickt habe?


    Entschuldige die ganzen Fragen, ich bin echt ein wenig überfordert.

  • Leider klappt es immer noch nicht :( Habe in showVisitenkarte die Tabellen befüllt mit einem String:


    showVisitenkarte() {

    let str = '';


    str = str + '<tr>';

    str = str + '<td>' + this.name + '</td>';

    str = str + '<td>' + this.adresse + '</td>';

    str = str + '<td>' + this.telefonnr + '</td>' ;

    str = str + '<td>' + this.mail + '</td>';

    if (this.fax!=0){

    str = str + '<td>' + this.fax + '</td>';

    }else str = str + '<td></td>';


    str = str + '</tr>';

    return str;


    Und in HTML sieht die Event Funktion jetzt so aus:


    let domObjArr = document.getElementsByClassName('Visitenkarte');

    for(let i=0; i < domObjArr.length; i++)

    domObjArr[i].addEventListener('click', function(){

    let rows = document.querySelector('table').rows;

    for (let i = 0; i < rows.length; i++) {

    let theRow = rows[i];

    for (let j = 0; j < theRow.cells.length; j++) {

    let theCell = theRow.cells[j];

    theRow.cells[j].showVisitenkarte();

    }

    }

    });


    Könntest du nochmal drüber schauen? habe ich doch noch etwas falsch verstanden?

    Liebe Grüße

  • Versuche dieses zu vervollständigen:

    Und benutze beim Posten von Code bitte Codetags, das Symbol </> oben rechts.

  • Ich habe mich schon gefragt, wie du den Code so posten konntest - danke!

    War ich mit .innerHTML beziehungsweise der ID komplett auf dem Holzweg? Ich dachte eigentlich, das wäre eine gute Idee gewesen, da die vorgefertigte HTML Tabelle für die einzelnen Eingabefelder bereits ID'S vergeben hat, aber keinen Value enthält. :(

  • Nein, mit innerHTML warst Du nicht auf dem Holzweg, Du musst den Code oben ja noch ergänzen und beim Eintragen in die Tabellenzellen wirst Du es benötigen.


    Auch mit den IDs warst Du nicht auf dem Holzweg, es wäre auch damit gegangen, nur müssten dann alle Zellen der Tabelle mit einer ID ausgestattet sein. Du schriebst, dass die Tabelle vorgegeben ist und ich wusste nicht, ob Du dort IDs eintragen kannst.

  • Ich merke gerade, dass ich mich vielleicht falsch ausgedrückt habe. Die Visitenkarte sind in einem Array gespeichert, und dieser wird als HTML Tabelle ausgegeben. Bei Auswahl einer Karte per Click Event sollen die entsprechenden Daten in eine neue Tabelle eingesetzt werden, die jeweils für die entsprechenden Daten ein Input Feld enthält. Hier zwei Beispiele:


    <td> Name </td> <td> <input id="name" value="" type="text" style="width:125px;"> </td>                                                     <td> Adresse </td> <td> <textarea id="adresse" rows="1" style="width:125px;"></textarea> </td>


    Die Daten sind alle bereits vorgegeben und haben alle eine entsprechende ID.

  • Dann liegen wir doch gar nicht weit auseinander. Die neue Tabelle macht nur Sinn, wenn sie Platz bzw. Zeile für mehrere Visitenkarten hat?

    Es wäre aber, denke ich, angebracht, wenn Du auch die Tabellen mal posten würdest, Du kannst sie ja auf 2 oder 3 Zeilen kürzen.

  • Es soll nur die angeklickte Karte ausgegeben werden, also müssten nur die Daten einer Karte ausgegeben werden.


    Hier ist die vorgefertigte Tabelle:


  • Dann habe wir allerdings aneinander vorbei geredet. Eine Tabelle ist hier eigentlich fehl am Platz aber das wollen wir mal nicht so eng sehen.

    Wir können dann das mit den Zeilen in der zweiten Tabelle weg lassen und Du kannst, wie Du es anfangs vor hattest, mit innerHTML die Daten in die Tabellenzellen übertragen:

  • Danke für deine Hilfe! :) Tatsächlich scheitert es jetzt nur noch am einlesen. Wie genau mache ich das? Erstelle ich einen String mit den Daten einer Karte?

    Code
    function showVisitenkarte(i){
    
    let str = '';
    str = str + 'document.getElementById(name).innerHTML =' this.name ;
    str = str + 'document.getElementById(adresse).innerHTML =' this.adressee ;
    usw.
    return str;
    }

    Ich verstehe nicht ganz, wo genau ich auf die ID zugreifen soll und wie ich dann den entsprechenden Wert in der Funktion showVisitenkarte() hinzufügen kann.

  • Die Elemente, die eine ID haben, sind ja offenbar das Ziel wo die Daten hin sollen. Dann müsste es so aussehen:

    Code
    function showVisitenkarte(i){
        document.getElementById('name').innerHTML =  this.name;
        document.getElementById('adresse').innerHTML =  this.adresse
        // usw.
        // Bei einem Eventhandler macht ein Rückgabewert keinen Sinn
    }
  • Jetzt meckert nur noch die Konsole wegen der HTML Datei:

    Code
    let domObjArr = document.getElementsByClassName('Visitenkarte');
                for(let i=0; i < domObjArr.length; i++)
                    domObjArr[i].addEventListener('click', function(){
                    showVisitenkarte(i);
                });

    Die Funktion showVisitenkarte ist nicht definiert steht dort. Könnte das daran liegen, dass die Funktion aus der Klasse Visitenkarte kommt und daher noch einen "Bezugspunkt" braucht? sowas wie x.showVisitenkarte(i)? Das habe ich sonst immer so gemacht, wenn ich Funktionen aus einer Klasse in HTML verwendet habe.

    domObjArr[i].showVisitenkarte(i); funktioniert leider auch nicht, laut Konsole ist das keine gültige Funktion.

  • Zitat

    Die Funktion showVisitenkarte ist nicht definiert steht dort. Könnte das daran liegen, dass die Funktion aus der Klasse Visitenkarte kommt und daher noch einen "Bezugspunkt" braucht?

    Von Klassen habe ich in dem Code, den Du bisher gepostet hast, nichts gesehen. Dann müsstest Du wieder etwas mehr Code posten.


    Zitat

    domObjArr[i].showVisitenkarte(i); funktioniert leider auch nicht, laut Konsole ist das keine gültige Funktion.

    Nein, das kann so nicht funktionieren, denn bei diesem Element in dem Array gibt es die Funktion nicht.

    Das ist mir die ganze Zeit schon aufgefallen: Dieses domObjArr ist ja eine Nodelist, d. h. im wesentlichen ein Array von DOM-Elementen. Und aus diesen Elementen müsstest Du den Text erst heraus lesen. Einfacher wäre es, das Array zu verwenden, das die Basis für die erste Tabelle ist.

  • Tut mir Leid, es ist auch nicht einfach mit mir. Die Funktion showVisitenkarte() kommt aus der Klasse Visitenkarte. Das hätte ich eher sagen müssen.

    Die Basis für Tabelle 1 ist eine Visitenkartenliste, die ebenfalls eine eigene Klasse darstellt, die dann die einzelnen Visitenkarten pusht.

    In der Html Datei habe ich dann einige Karten erstellt und mit der hinzufuegen Methode an das Array angehangen. Das klappt soweit auch.

  • Verstehe, so wird das alles jetzt viel klarer.

    Zitat

    In der Html Datei habe ich dann einige Karten erstellt und mit der hinzufuegen Methode an das Array angehangen. Das klappt soweit auch.

    Das bedeutet, dass wir jetzt auf der einen Seite das Array in der Visitenkartenliste haben und auf der anderen die HTML-Elemente. Vermutlich sind beide parallel aufgebaut, aber besser als uns darauf zu verlassen wäre es, eine Referenz im HTML-Element auf das Array in der Visitenkartenliste zu hinterlegen. Dafür eignet sich ein data-Attribut: data-idx="5".

    Also den Index beim Hinzufuegen zurück geben und in das data-Attribut eintragen:

    Code
        hinzufuegen(name, adresse,telefonnummer, fax) {
            let idx = this.karten.length;
            let k = new Visitenkarte(name, adresse,telefonnummer, fax);
            
            this.karten.push(k);
            return idx;
        }

    Und dann im Eventhandler:

    Code
                let domObjArr = document.getElementsByClassName('Visitenkarte');
                for(let i=0; i < domObjArr.length; i++)
                    domObjArr[i].addEventListener('click', function(){
                        let idx = this.dataset['idx'];
                        let karte = visitenkartenliste.holen(idx);
                        karte.showVisitenkarte();
                    });
                }

    Wenn man es so macht, braucht man noch die Funktion holen in der Liste, die kannst Du selber hinzufügen. Alles ungetestet.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!