javascript DOM-添加href和<a>鏈接</a>

Question

我做了一個包含ID名稱和鏈接的表。 我想鏈接到您單擊時分配給該頁面的頁面。 我嘗試了不同的方法，但是沒有用。

所以我希望我的鏈接在您單擊該頁面時進入該頁面

這是我到目前為止所得到的

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 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;

        //link-------------------

        var a = document.createElement('a');
        a.setAttribute("href", link);
        td_link.appendChild(a);


    td_id.textContent = id;
    td_name.textContent = name;
    td_link.textContent = link;

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


    tbody.appendChild(tr_body);

    //css----------------------
    td_id.style.padding = "10px";
    td_id.style.border = "1px solid black";

    td_name.style.padding = "10px";
    td_name.style.border = "1px solid black";

    td_link.style.padding = "10px";
    td_link.style.border = "1px solid black";

}

//css -----------
tbl.style.border = "1px solid black";

th_id.style.padding = "10px";
th_id.style.border = "1px solid black";

th_name.style.padding = "10px";
th_name.style.border = "1px solid black";

th_link.style.padding = "10px";
th_link.style.border = "1px solid black";

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

console.log(tbl);

document.body.appendChild(tbl);

Answer 1

我同意Parag Datar的意見，但此處給出的答案https://stackoverflow.com/a/4772817/3204135將涵蓋缺少的鏈接文本。 在您的代碼中，它可能看起來像這樣：

    var a = document.createElement('a');
    a.setAttribute("href", link);
    var linkText = document.createTextNode(link);
    a.appendChild(linkText);
    td_link.appendChild(a); 

Answer 2

刪除td_link.textContent = link; 行，你很好！