Tabelle mit editierbaren Zellen in Javascript/Html

[hmm]

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.