hmm: Tabelle mit editierbaren Zellen in Javascript/Html

Hi Leute,

ich hab ein Json Object dessen Inhalt ich dynamisch mit Javascript auf meiner Webseite als Tabelle darstellen möchte. Die Tabelle soll so geschrieben sein, dass ich die angezeigten Werte manuell auf der Seite ändern kann.

Wie kann ich sowas am einfachsten realisieren?

Mit jQuery kann ich eine passende Tabelle dynamisch aufbauen, aber wie mache ich die Zellen beschreibbar so dass das ganze noch vernünftig aussieht?

akzeptierte Antworten

  1. Lieber hmm,

    Mit jQuery kann ich eine passende Tabelle dynamisch aufbauen, aber wie mache ich die Zellen beschreibbar so dass das ganze noch vernünftig aussieht?

    HTML kennt Eingabefelder. Die lassen sich auch mit JavaScript in Tabellenzellen erstellen.

    Das mit dem Editieren wäre also nur eine Frage von input-Elementen. Aber wie ist das mit dem Speichern? Ist das auch vorgesehen?

    Liebe Grüße,

    Felix Riesterer.

    1. eingabefelder, hm... ich muss gucken ob das damit dann auch solide aussieht

      ich schicke die daten als json an mein scala backend wo es in einer mysql tabelle gespeichert wird. ich benutze das play framwork. mir reicht es das json, dass ich mir per get methode hole, dynamisch in einer "schönen" tabelle darstellen zu können die editierbare zellen hat, drückt der benutzer auf einen knopf wird das ganze wieder als json zurück an die mysql tabelle geschickt (per post methode)

      das meiste davon macht mein framework, ich muss nurnoch eine idee für eine tabelle bekommen :/

      1. Lieber hmm,

        eingabefelder, hm... ich muss gucken ob das damit dann auch solide aussieht

        das regelt man mit CSS. Da hast Du alle Gestaltungsmöglichkeiten.

        Liebe Grüße,

        Felix Riesterer.

  2. Hallo,

    ich hab ein Json Object dessen Inhalt ich dynamisch mit Javascript auf meiner Webseite als Tabelle darstellen möchte. Die Tabelle soll so geschrieben sein, dass ich die angezeigten Werte manuell auf der Seite ändern kann.

    Wie kann ich sowas am einfachsten realisieren?

    neben Felix's Idee wäre evtl. auch contenteditable was für dich.

    Gruß
    Jürgen

    1. danke contenteditable macht genau dass was ich haben wollte!

      ich schreibe jetzt einen code der folgendes macht:

      1. die tabelle dynamisch aufbaut
      2. jeder contenteditablezelle eine funktion anhängt die änderungen in einem json speichert
      3. ich baue einen knopf der das json per post zurück schickt

      habt ihr ein paar ideen wie ich die tabelle farblich übersichtlich gestalten kann?

      1. Hallo,

        danke contenteditable macht genau dass was ich haben wollte!

        gerade gesehen, im Wiki kann man contenteditable sogar testen.

        Gruß
        Jürgen

        1. gerade gesehen, im Wiki kann man contenteditable sogar testen.

          Heut Mittag hab ich grad überlegt, dass da 'nen Kalender mit LocalStorage besser wäre.

          Mach ich irgendwann mal.

          Gruß
          Jürgen

          Herzliche Grüße

          Matthias Scharwies

          --
          Es gibt viel zu tun: ToDo-Liste
          1. Hallo Matthias Scharwies,

            Heut Mittag hab ich grad überlegt, dass da 'nen Kalender mit LocalStorage besser wäre.

            Mach ich irgendwann mal.

            Ein Kalender ist imho kein Anwendungsfall für localstorage, denn den möchte man geräteübergreifend nutzen. Ich habe vor einiger Zeit mal „Straße“ programmiert. http://selfhtml.apsel-mv.de/strasze/strasze.html http://selfhtml.apsel-mv.de/strasze/strasze2.html Das wäre vielleicht eher was.

            Bis demnächst
            Matthias

            --
            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
            1. Hallo und guten Abend,

              Ein Kalender ist imho kein Anwendungsfall für localstorage,

              Kommt immer darauf an, wie lange der Anwender noch zu leben gedenkt ;-P

              Grüße
              TS

              --
              es wachse der Freifunk
              http://freifunk-oberharz.de
            2. Servus!

              Hallo Matthias Scharwies,

              Heut Mittag hab ich grad überlegt, dass da 'nen Kalender mit LocalStorage besser wäre.

              Mach ich irgendwann mal.

              Ein Kalender ist imho kein Anwendungsfall für localstorage, denn den möchte man geräteübergreifend nutzen.

              Stimmt, war mein zweiter Gedanke.

              Ich habe vor einiger Zeit mal „Straße“ programmiert. http://selfhtml.apsel-mv.de/strasze/strasze.html http://selfhtml.apsel-mv.de/strasze/strasze2.html Das wäre vielleicht eher was.

              Nett. @Felix Riesterer verwendet für das Speichern von solchen Daten oft 'ne json-Datei.

              Kommt immer darauf an, wie lange der Anwender noch zu leben gedenkt ;-P

              @TS: LocalStorage kann mind. 5MB speichern. Man könnte länger in der Vergangenheit zurückliegende Einträge ja auch wieder löschen.

              Das wäre halt eine Erweiterung der üblichen ToDo-Liste, die so halt wenig praktischen Nutzen hat.

              Herzliche Grüße

              Matthias Scharwies

              --
              Es gibt viel zu tun: ToDo-Liste

              Folgende Beiträge verweisen auf diesen Beitrag:

            3. Hi,

              Ich habe vor einiger Zeit mal „Straße“ programmiert. http://selfhtml.apsel-mv.de/strasze/strasze.html

              Was ist strasze?

              cu,
              Andreas a/k/a MudGuard

        2. ich versuch jetzt bei der tabelle per jquery eine funktion an jede zelle anzuhängen. die funktion soll aktiviert werden, wenn der mauszeiger die besuchte zelle verlässt. ich habs hiermit versucht:

                      $('.td').on( "focusout", function(event) {
                          var keycode = event.keyCode || event.which;
                          alert("test " + keycode);
                      });
          

          leider funktioniert das nicht. wie krieg ich meine funktion eingebaut?

          1. Hallo,

            … wenn der mauszeiger die besuchte zelle verlässt.

            da ich mich mit jquery nicht auskenne, weiß ich auch nicht, wann focusout feuert. Ich habe aber die Erfahrung gemacht, das focus oder blur nur bei Elementen feuern, die fokusierbar sind. Würde es hier mal mit mouseout probieren.

            Und warum fragst du die Tastatur ab, wenn du ein Element verlässt? Du willst doch beim Mausraus den Inhalt des Feldes abfragen, z.B. mit textContent oder innerText.

            Gruß
            Jürgen

            1. @@JürgenB

              Ich habe aber die Erfahrung gemacht, das focus oder blur nur bei Elementen feuern, die fokusierbar sind.

              Interaktive Elemente müssen fokussierbar sein. Ggfs. mit tabindex="0" nachhelfen – und enstsprechenden ARIA-Attributen.

              Würde es hier mal mit mouseout probieren.

              Isch ’abe gar keine Maus.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. Hallo Gunnar,

                Würde es hier mal mit mouseout probieren.

                Isch ’abe gar keine Maus.

                und wieder nicht drangedacht; und dabei versuche ich doch gerade meine Navigation Tastatur-, Maus- und Touch-tauglich zu bekommen.

                Gruß
                Jürgen

          2. Hi,

            ich versuch jetzt bei der tabelle per jquery eine funktion an jede zelle anzuhängen. die funktion soll aktiviert werden, wenn der mauszeiger die besuchte zelle verlässt. ich habs hiermit versucht:

            Ich würde zuallererst mal nicht über 'focusout', sondern über sowohl die change-Funktion sowie die keypress-Funktion (mit den Tasten Deiner Wahl, z.b.Enter oder Tab) gehen.

            leider funktioniert das nicht. wie krieg ich meine funktion eingebaut?

            Einfach alles der Reihe nach:

            • Alle editierbaren Felder im dynamischen Aufbau mit einer ID versehen
            • O.g. Funktion en einbauen, die soll im Eventfall die ID und den Wert auslesen
            • Weitere Funktion schreiben, die für die ID und den Wert den Serverrequest durchführt
            • freuen, wenns läuft

            Lukas

            Folgende Beiträge verweisen auf diesen Beitrag:

      2. danke contenteditable macht genau dass was ich haben wollte!

        ich schreibe jetzt einen code der folgendes macht:

        1. die tabelle dynamisch aufbaut

        Idealerweise über ein Template. Dann brauchst Du nur eine Funktion die die Tabelle mit den Daten ins DOM pflanzt.

        1. jeder contenteditablezelle eine funktion anhängt die änderungen in einem json speichert

        Viel zu umständlich. Zweckmäßiger ist es, nur eine Funktion zu haben die die ganze Tabelle ausliest.

        1. ich baue einen knopf der das json per post zurück schickt

        Die aus der Tabelle gelesenen Daten (z.B. Array mit Objekten) zu serialisieren ist ja dann kein Problem mehr.

        MfG

        1. @@pl

          1. jeder contenteditablezelle eine funktion anhängt die änderungen in einem json speichert

          Viel zu umständlich. Zweckmäßiger ist es, nur eine Funktion zu haben die die ganze Tabelle ausliest.

          Und dann? Soll die ganze Tabelle bei jeder kleinen Änderung zum Server geschickt werden?

          Doch wohl nicht, sondern nur die Änderung.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. @@pl

            1. jeder contenteditablezelle eine funktion anhängt die änderungen in einem json speichert

            Viel zu umständlich. Zweckmäßiger ist es, nur eine Funktion zu haben die die ganze Tabelle ausliest.

            Und dann? Soll die ganze Tabelle bei jeder kleinen Änderung zum Server geschickt werden?

            Nein, warum das denn?

          2. hi Gunnar, warum bist Du so Bitter?Mann?

            Doch wohl nicht, sondern nur die Änderung.

            Ich geb Dir maln Tipp, die Daten werden zweckmäßig organisiert:

            • je Tabelle
            • je Zeile
            • je Zelle
            • oder anderweitig beliebig gruppiert

            und dementsprechend sieht auch die Datenstruktur für den wahlfreien Zugriff aus. Die Daten sind entweder//oder wo:

            • im DOM zum Bearbeiten von User
            • im Hauptspeicher für den wahlfreien Zugriff von ScriptPL

            Zwischen diesen beiden Örtlichkeiten vermittelt eine Funktion. Dann kann es eine weitere Funktion geben, die, entsprechend der Datenorganisation z.B. eine Zeile, eine Zelle oder alles zusammen zum Server sendet.

            MfGs

            --
            Die Menschheit hätte so, wie sie jetzt ist, niemals entstehen dürfen (Erstes Buch Mose, Genesis).
      3. Lieber hmm,

        danke contenteditable macht genau dass was ich haben wollte!

        hoffentlich bist Du mit dem Ergebnis (HTML-Code) zufrieden. Meiner Erfahrung nach bauen die Browser sehr unterschiedlich nützlichen Code, je nach Bearbeitungswahn durch den Benutzer. Daher kommen solche WYSIWYG Editoren wie TinyMCE oder CKEditor, die das unterschiedliche Verhalten der Browser in diesem Bereich vereinheitlichen und die technische Qualität des HTML-Codes gewährleisten.

        Sicher, Du willst keine ganze Seite verändern, sondern nur jeweils den Inhalt einer Tabellenzelle. Aber das grundsätzliche Problem bleibt damit bestehen. Vielleicht willst Du ja einmal die Demo für den Inline-Mode ausprobieren? Vielleicht ist das jetzt mit Kanonen auf Spatzen geschossen, aber vielleicht hilft Dir zumindest dieser Denkanstoß weiter?

        Liebe Grüße,

        Felix Riesterer.

        1. Hi Felix,

          hoffentlich bist Du mit dem Ergebnis (HTML-Code) zufrieden. Meiner Erfahrung nach bauen die Browser sehr unterschiedlich nützlichen Code, je nach Bearbeitungswahn durch den Benutzer. Daher kommen solche WYSIWYG Editoren wie TinyMCE oder CKEditor, die das unterschiedliche Verhalten der Browser in diesem Bereich vereinheitlichen und die technische Qualität des HTML-Codes gewährleisten.

          Abgesehen davon, dass aufgrund des Ausgangspost fraglich ist, ob JS überhaupt das richtige Werkzeug zu diesem Zeitpunkt ist.

          ich hab ein Json Object dessen Inhalt ich dynamisch mit Javascript auf meiner Webseite als Tabelle darstellen möchte.

          Dann würde ich die Tabelle mittels php erzeugen und beim Editieren der Tabellenwerte wie hier beschrieben vorgehen.

          Lukas

  3. Hi Leute,

    danke für die antworten. ich schau mir gleich nochmal die ideen mit den id's an. ein paar vorschläge habe ich schon getestet, leider ohne erfolg. die entsprechenden zellen sind "contenteditable", deswegen funktioniert leider kein tab und auch kein enter :(

    hier mein code (die große funktion trenne ich, sobald alles funktioniert, in zwei übersichtlichere unredundante funktionen, hab die gestern beim fernsehn runtergehackt und wollte nicht viel nachdenken :D).

                function createTableFromJson(data) {
                    var tr_header = document.createElement("tr");
                    var tr_underline = document.createElement("tr");
                    var th = document.createElement("th");
                    th.innerHTML = "Mitarbeiter";
                    tr_header.appendChild(th);
                    var tdA = document.createElement("td");
                    tdA.innerHTML = "";
                    tr_underline.appendChild(tdA);
                    
                    for(var i = 0; i < data[0].skills.length; i++) {
                        var th_ = document.createElement("th");
                        th_.innerHTML = "";
                        tr_header.appendChild(th_);
                        
                        if(i > 0) {
                            var th_1 = document.createElement("th");
                            th_1.innerHTML = "";
                            tr_header.appendChild(th_1);
                        }
                        
                        var th2 = document.createElement("th");
                        th2.innerHTML = data[0].skills[i].skill;
                        tr_header.appendChild(th2);
                        
                        var tdA2 = document.createElement("td");
                        tdA2.innerHTML = "Wissen";
                        tr_underline.appendChild(tdA2);
                        
                        var tdA3 = document.createElement("td");
                        tdA3.innerHTML = "Erfahrung";
                        tr_underline.appendChild(tdA3);
                        
                        var tdA4 = document.createElement("td");
                        tdA4.innerHTML = "Interesse";
                        tr_underline.appendChild(tdA4);
                    }
                    document.getElementsByTagName("table")[0].appendChild(tr_header);
                    document.getElementsByTagName("table")[0].appendChild(tr_underline);
                    
                    for(var i = 0; i < data.length; i++) {
                        var tr = document.createElement("tr");
                        var td = document.createElement("td");
                        td.innerHTML = data[i].vorname + " " + data[i].nachname;
                        td.setAttribute("contenteditable", true);
                        tr.appendChild(td);
                        
                        for(var k = 0; k < data[i].skills.length; k++) {
                            var td_skill1 = document.createElement("td");
                            td_skill1.innerHTML = data[i].skills[k].wissen;
                            td_skill1.setAttribute("contenteditable", true);
                            tr.appendChild(td_skill1);
                            
                            var td_skill2 = document.createElement("td");
                            td_skill2.innerHTML = data[i].skills[k].erfahrung;
                            td_skill2.setAttribute("contenteditable", true);
                            tr.appendChild(td_skill2);
                            
                            var td_skill3 = document.createElement("td");
                            td_skill3.innerHTML = data[i].skills[k].interesse;
                            td_skill3.setAttribute("contenteditable", true);
                            tr.appendChild(td_skill3);
                        }
                        document.getElementsByTagName("table")[0].appendChild(tr);
                    }
                };
    
        	    $(document).ready(function(){
                  $.get( "/mitarbeiter",
                    function( data ){
                      createTableFromJson(data);
                    })
                });
                
                $('.td').on( "mouseout", function(event) {
                    var keycode = event.keyCode || event.which;
                    alert("test " + keycode);
                });
    

    die angehangene funktion würde ich so schreiben, dass die änderung direkt der POST ans backend geschickt wird, wo die änderung direkt in der datenbank gespeichert wird. dazu mache ich später einen "editier modus an" knopf.

    1. Lieber hmm,

      hier mein code

      so wirklich sieht der aber nicht nach jQuery aus...

      Liebe Grüße,

      Felix Riesterer.