使用对象制作表格

Question

我正在制作一张桌子，但只使用 Javascript。我已经做了表格，它显示在控制台上，但我无法让它在页面上可见。我试过appendChild() 和insertBefore() 都不行，也不能让网址可点击。

这是我的代码：

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

您是否将输出写入文档？否则它将仅保留在脚本中。

像这样：

document.body.appendChild(tbl);

Answer 2

不是最好的方式，但它是一种方式......

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;