Wie zerlege ich diese 100-Zeilen JS Funktion in Clean Code?

[hmm]

Hallo,

ich habe folgende 100-Zeilen Funktion geschrieben:

function createTableFromJson(data) {
                data_global = data;
                
                var tr_header = document.createElement("tr");
                var tr_underline = document.createElement("tr");
                var th = document.createElement("th");
                tr_header.appendChild(th);
                tr_header.appendChild(document.createElement("th"));
                tr_header.appendChild(document.createElement("th"));
                tr_header.appendChild(document.createElement("th"));
                var tdA = document.createElement("td");
                tdA.innerHTML = "";
                tr_underline.appendChild(tdA);
                tr_underline.appendChild(document.createElement("td"));
                tr_underline.appendChild(document.createElement("td"));
                tr_underline.appendChild(document.createElement("td"));
                
                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 tdCh = document.createElement("input");
                    tdCh.type = "Checkbox";
                    tdCh.setAttribute("name", data[i].personenId);
                    tr.appendChild(tdCh);
                    
                    var tdNr = document.createElement("td");
                    tdNr.innerHTML = data[i].personenId;
                    tdNr.setAttribute("contenteditable", false);
                    tr.appendChild(tdNr);
                    
                    var td = document.createElement("td");
                    td.innerHTML = data[i].vorname;
                    td.setAttribute("contenteditable", true);
                    td.setAttribute("name", i + "," + "vorname");
                    tr.appendChild(td);
                    
                    var tdNA = document.createElement("td");
                    tdNA.innerHTML = data[i].nachname;
                    tdNA.setAttribute("contenteditable", true);
                    tdNA.setAttribute("name", i + "," + "nachname");
                    tr.appendChild(tdNA);
                    
                    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);
                        td_skill1.setAttribute("name", i + "," + "skills," + k + ",wissen");
                        tr.appendChild(td_skill1);
                        
                        var td_skill2 = document.createElement("td");
                        td_skill2.innerHTML = data[i].skills[k].erfahrung;
                        td_skill2.setAttribute("contenteditable", true);
                        td_skill2.setAttribute("name", i + "," + "skills," + k + ",erfahrung");
                        tr.appendChild(td_skill2);
                        
                        var td_skill3 = document.createElement("td");
                        td_skill3.innerHTML = data[i].skills[k].interesse;
                        td_skill3.setAttribute("contenteditable", true);
                        td_skill3.setAttribute("name", i + "," + "skills," + k + ",interesse");
                        tr.appendChild(td_skill3);
                    }
                    
                    document.getElementsByTagName("table")[0].setAttribute("align", "center")
                    document.getElementsByTagName("table")[0].appendChild(tr);
                }
            };

Ich war müde und habe den Code einfach runtergehackt.

Der Code baut mir folgende Tabelle:

Testwebseite

Login geht mit: Christopher hallo123

In der Tabelle kann man die Zahlen ändern, was direkt gespeichert wird und die Namen, was auch direkt gespeichert wird.

Ich wollte eine schöne Skillmatrix als Klausurvorbereitung schreiben und muss den Code oben dafür noch erweitern. Frage: Zerlege ich die Funktion oben in Unterfunktionen oder lieber in Objekte? Oder tausch ich den Code direkt gegen irgendeine Bibliothek aus?