Javascript 无法在appendchild之后将表行与标题对齐

我试图使用HTML文档中定义的按钮的

onclick

event将行和标题附加到HTML表格元素。尽管它成功地添加了标题和行，但它未能将行的第一个元素与标题对齐，并且页面以如下格式呈现表：

下面是通过追加行和标题来更新/向表中添加记录的JavaScript方法：

函数updateTable（）{
var usr=JSON.parse（localStorage.getItem（'user'））；
var i=testObject.length-1；
var header=document.createElement（“th”）；
var usernode=document.createElement（“td”）；
var usertext=document.createTextNode（“用户名”）；
appendChild（usertext）；
header.appendChild（usernode）；
var enode=document.createElement（“td”）；
var etext=document.createTextNode（“电子邮件”）；
enode.appendChild（etext）；
header.appendChild（enode）；
var pnode=document.createElement（“td”）；
var ptext=document.createTextNode（“密码”）；
pnode.appendChild（ptext）；
header.appendChild（pnode）；
var lnode=document.createElement（“td”）；
var ltext=document.createTextNode（“位置”）；
lnode.appendChild（ltext）；
header.appendChild（lnode）；
var onode=document.createElement（“td”）；
var otext=document.createTextNode（“组织”）；
onode.appendChild（otext）；
header.appendChild（onode）；
var noder=document.createElement（“tr”）；
var nodeu=document.createElement（“td”）；
var textu=document.createTextNode（usr[i].uname）；
nodeu.appendChild（textu）；
noder.appendChild（nodeu）；
var nodee=document.createElement（“td”）；
var texte=document.createTextNode（usr[i].email）；
nodee.appendChild（texte）；
noder.appendChild（nodee）；
var nodep=document.createElement（“td”）；
var textp=document.createTextNode（usr[i].pass）；
nodep.appendChild（textp）；
noder.appendChild（nodep）；
var nodel=document.createElement（“td”）；
var textl=document.createTextNode（usr[i].loc）；
nodel.appendChild（textl）；
noder.appendChild（nodel）；
var nodeo=document.createElement（“td”）；
var texto=document.createTextNode（usr[i].org）；
nodeo.appendChild（texto）；
noder.appendChild（nodeo）；
if（document.getElementById（“t”）.querySelector（“th”）==null）{
document.getElementById（“t”）.appendChild（标题）；
}
document.getElementById（“t”）.appendChild（noder）；
清除（）；
}

男性
女性
提交

您对标题使用了错误的元素

“TH”是“TD”的等价物，它是一个单元，位于“TR”内

在TH中添加TDs，实际上需要在TR中添加TH。因此，使用

createElement（'TH'）

更改

createElement（'TR'）

和

createElement（'td'）

更改

createElement（'TH'）

---

我还建议您在表中使用ad和TBODY标记。

得到一个bug，显示在标题行附近呈现的第一行

修订守则：

function updateTable(){
    var usr = JSON.parse(localStorage.getItem('user'));
    var i = testObject.length-1;

    var noder = document.createElement("tr");
    if(i==0){
      var usernode = document.createElement("th");
      var usertext = document.createTextNode("Username");
      usernode.appendChild(usertext);
      noder.appendChild(usernode);
      var enode = document.createElement("th");
      var etext = document.createTextNode("Email");
      enode.appendChild(etext);
      noder.appendChild(enode);
      var pnode = document.createElement("th");
      var ptext = document.createTextNode("Password");
      pnode.appendChild(ptext);
      noder.appendChild(pnode);
      var lnode = document.createElement("th");
      var ltext = document.createTextNode("Location");
      lnode.appendChild(ltext);
      noder.appendChild(lnode);
      var onode = document.createElement("th");
      var otext = document.createTextNode("Organization");
      onode.appendChild(otext);
      noder.appendChild(onode);
    }


    var nodeu = document.createElement("td");
    var textu = document.createTextNode(usr[i].uname);
    nodeu.appendChild(textu);
    noder.appendChild(nodeu);
    var nodee = document.createElement("td");
    var texte = document.createTextNode(usr[i].email);
    nodee.appendChild(texte);
    noder.appendChild(nodee);
    var nodep = document.createElement("td");
    var textp = document.createTextNode(usr[i].pass);
    nodep.appendChild(textp);
    noder.appendChild(nodep);
    var nodel = document.createElement("td");
    var textl = document.createTextNode(usr[i].loc);
    nodel.appendChild(textl);
    noder.appendChild(nodel);
    var nodeo = document.createElement("td");
    var texto = document.createTextNode(usr[i].org);
    nodeo.appendChild(texto);
    noder.appendChild(nodeo);

    /*if(document.getElementById("t").querySelector("th")==null){
      document.getElementById("t").appendChild(header);
    }*/
    document.getElementById("t").appendChild(noder);

    clear();
  }

---

共享代码，而不仅仅是一张图片。到目前为止有任何修复吗？伙计们？…如果要将所有TDs和THs附加到同一个TR，请为TDs使用新的TR