Невозможно выровнять строки таблицы с заголовком после appendchild - PullRequest
Новая
       1

Невозможно выровнять строки таблицы с заголовком после appendchild

0 голосов
/ 24 февраля 2019

Я пытаюсь добавить строки и заголовок к элементу таблицы 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>

Ответы [ 2 ]

0 голосов
/ 24 февраля 2019

Получение одной ошибки, показывающей, что первая строка отображается рядом со строкой заголовка.

введите описание изображения здесь



Исправленный код: 

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();
  }
0 голосов
/ 24 февраля 2019

Вы используете неправильный элемент для заголовка.

"TH" является эквивалентом "TD", это ячейка, она идет внутри "TR".

Выдобавив TD внутри TH, вам нужно добавить TH внутри TR.Поэтому поменяйте createdElement('th') на createElement('tr') и createElement('td') на createElement('th').

Я бы также порекомендовал вам использовать теги THEAD и TBODY внутри таблицы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...