Question

我正在尝试使用HTML文档中定义的按钮的onclick事件将行和标头附加到HTML表元素。尽管它成功添加了标题和行，但未能将行的第一个元素与标题对齐，并且页面以如下格式呈现表：

Click here to view Table render image 下面是通过追加行和标头来将记录更新/添加到表的JavaScript方法：

 function 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("Username");
    usernode.appendChild(usertext);
    header.appendChild(usernode);
    var enode = document.createElement("td");
    var etext = document.createTextNode("Email");
    enode.appendChild(etext);
    header.appendChild(enode);
    var pnode = document.createElement("td");
    var ptext = document.createTextNode("Password");
    pnode.appendChild(ptext);
    header.appendChild(pnode);
    var lnode = document.createElement("td");
    var ltext = document.createTextNode("Location");
    lnode.appendChild(ltext);
    header.appendChild(lnode);
    var onode = document.createElement("td");
    var otext = document.createTextNode("Organization");
    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(header);
    }
    document.getElementById("t").appendChild(noder);
    clear();
  }

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="form.css">
</head>
<body>  

    <script src="form.js"></script>
     <p id="test"></p>
    <div id="userdiv">
        <input type="text" placeholder="Username" id="uname">
    </div>
    <div id="maildiv">
        <input type="text" placeholder="Email" id="email">
    </div>
    <div id="passdiv">
        <input type="text" placeholder="Password" id="pass">
    </div>
     <div id="locdiv">
        <input type="text" placeholder="Location" id="loc">
     </div>
      <div id="orgdiv">
            <input type="text" placeholder="Organization" id="org">
        </div>
      <div id="gen">
        <input type="radio"/> Male
        <input type="radio"/> Female
    </div>
    <button id="submit" onclick="save()">Submit</button>
    <table id="t" border="1">
    </table>
 
</body>
</html>

Answer 1

您在标题中使用了错误的元素。

“ TH”等同于“ TD”，它是一个单元格，位于“ TR”内部。

您要在TH内添加TD，实际上您需要在TR内添加TH。因此，将createdElement('th')更改为createElement('tr')，将createElement('td')更改为createElement('th')。

我还建议您在表格内使用THEAD和TBODY标签。

Answer 2

遇到一个错误，显示第一行与标题行相邻。.

enter image description here

修改后的代码：

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();
  }

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

2 个答案: