javascript - 在 JavaScript 中创建动态表的一些误解

Question

我尝试使用 JavaScript 创建动态表，该表包含两列名字和姓氏。

这是 JavaScropt 代码:

function CreatTable() {

    var tablearea = document.getElementById('ShowDataID');
    var table = document.createElement('table');
    var thead = document.createElement("thead");
    var tr = document.createElement('tr');
    var th = document.createElement('th');

    var firstNameTxt = document.createTextNode("First Name");
    th.appendChild(firstNameTxt);
    tr.appendChild(th);
    thead.appendChild(tr);
    table.appendChild(thead);

    var familyNameTxt = document.createTextNode("Family Name");
    th.appendChild(familyNameTxt);
    tr.appendChild(th);
    thead.appendChild(tr);
    table.appendChild(thead);

    for (var i = 1; i < 4; i++) {
        var tr = document.createElement('tr');
        tr.appendChild(document.createElement('td'));
        tr.appendChild(document.createElement('td'));
        tr.cells[0].appendChild(document.createTextNode('John'))
        tr.cells[1].appendChild(document.createTextNode('McDowell'))
        table.appendChild(tr);
    }


    tablearea.appendChild(table);
}

这是我得到的结果:

我的问题是为什么我在姓氏栏下没有得到“McDowell”。为什么它被转移了？我错过了什么？

Answer 1

第二次尝试创建一个新的th，不要使用已经用过的

function CreatTable() {

    var tablearea = document.getElementById('ShowDataID');
    var table = document.createElement('table');
    var thead = document.createElement("thead");
    var tr = document.createElement('tr');
    var th = document.createElement('th');

    var firstNameTxt = document.createTextNode("First Name");
    th.appendChild(firstNameTxt);
    tr.appendChild(th);
    thead.appendChild(tr);
    table.appendChild(thead);

    //********* Look here *****************
    var familyNameTxt = document.createTextNode("Family Name");
    th = document.createElement('th'); //*** Create a new th here. Dont use the old one
    //********* Look here *****************

    th.appendChild(familyNameTxt);
    tr.appendChild(th);
    thead.appendChild(tr);
    table.appendChild(thead);

    for (var i = 1; i < 4; i++) {
        var tr = document.createElement('tr');
        tr.appendChild(document.createElement('td'));
        tr.appendChild(document.createElement('td'));
        tr.cells[0].appendChild(document.createTextNode('John'))
        tr.cells[1].appendChild(document.createTextNode('McDowell'))
        table.appendChild(tr);
    }


    tablearea.appendChild(table);
}

DEMO