Machen Sie Tabelle mit Objekt

Question

Ich mache eine Tabelle, aber nur mit Javascript. Ich habe den Tisch schon gemacht und er sieht direkt auf der Konsole aus, aber ich kann es auf der Seite nicht sichtbar machen. Ich habe versucht appendChild() und insertBefore() und es funktioniert nicht, und kann auch nicht die URL klickbar machen.

Hier ist mein Code:

var companies = [ 
    { 
     id: 1, 
     name: 'Google', 
     link: 'http://google.com/' 
    }, 
    { 
     id: 2, 
     name: 'Microsoft', 
     link: 'http://microsoft.com/' 
    }, 
    { 
     id: 3, 
     name: 'Apple', 
     link: 'http://apple.com' 
    } 
]; 



var tbl = document.createElement('table'); 
var input = document.getElementById('input'); 
var thead = document.createElement("thead"); 
var tbody = document.createElement("tbody"); 

var tr_head = document.createElement("tr"); 

var th_id = document.createElement("th"); 
var th_name = document.createElement("th"); 
var th_link = document.createElement("th"); 

th_id.textContent = "Id"; 
th_name.textContent = "Name"; 
th_link.textContent = "link"; 


tr_head.appendChild(th_id); 
tr_head.appendChild(th_name); 
tr_head.appendChild(th_link); 

thead.appendChild(tr_head); 

for(var i = 0; i < companies.length; i++) { 
    var tr_body = document.createElement("tr"); 

    var td_id = document.createElement("td"); 
    var td_name = document.createElement("td"); 
    var td_link = document.createElement("td"); 

    // var id = companies[i].id; 
    // var name = companies[i].name; 
    // var link = companies[i].link; 

    td_id.textContent = companies[i].id; 
    td_name.textContent = companies[i].name; 
    td_link.textContent = companies[i].link; 

    tr_body.appendChild(td_id); 
    tr_body.appendChild(td_name); 
    tr_body.appendChild(td_link); 

    tbody.appendChild(tr_body); 
} 

tbl.appendChild(thead); 
tbl.appendChild(tbody); 

console.log(tbl); 

// input.appendChild(tbl); 

Answer 1

Haben Sie die Ausgabe an das Dokument schreiben? Ansonsten bleibt es einfach im Skript.

So:

document.body.appendChild(tbl); 

Answer 2

nicht der beste Weg, aber es ist ein Weg ...

var input = document.getElementById("input"); 

var rows = ""; 

for(var i = 0; i < companies.length; i++) { 
    rows += "<tr><td>"+companies[i].id+"</td>" 
     + "<td><a href='"+companies[i].link+"'>"+companies[i].name+"</a></td></tr>" 
} 

var table = "<table>"+rows+"</table>"; 

input.innerHTML = table;