使用js添加项目后HTML表格大小不正确答案

【问题标题】：HTML Table is not sized correctly after adding items with js使用js添加项目后HTML表格大小不正确
【发布时间】：2018-11-23 03:39:07
【问题描述】：

我用这个 HTML 代码创建了一个表格：

<div class="noten_tabelle">
            <table id="grades_table" style="width:100%">
              <tr>
                <th>Fach</th>
                <th>mündlich</th>
                <th>Klausur</th>
              </tr>
              <!-- Make content with js code -->
            </table>
          </div>

在 Javascript 中，我将这些东西添加到表格中。每次服务器返回新加载的值时，该函数都会运行。这是Javascript函数：

function addToTable(subject, mdl, klu) {

  var subject_name = getSubjectByNumber(subject);

      //Zeile erstellen

      var y = document.createElement([subject_name]);
      y.setAttribute("id", [subject_name]);
      document.getElementById("grades_table").appendChild(y);

      //Spalten in einer Zeile

      var cE = document.createElement("TD");
      var tE = document.createTextNode([subject_name]);
      cE.appendChild(tE);
      document.getElementById([subject_name]).appendChild(cE);

      var a = document.createElement("TD");
      var b = document.createTextNode([mdl]);
      a.appendChild(b);
      document.getElementById([subject_name]).appendChild(a);

      var c = document.createElement("TD");
      var d = document.createTextNode([klu]);
      c.appendChild(d);
      document.getElementById([subject_name]).appendChild(c);
}

为了理解。主题值是一个数字，所以我把它变成了一个字符串。结果是主题名称。他有点像：“Mathematik”或“Deutsch”。
我得到了这个：

但这是不正确的。主题名称“Latein”在“Fach”下是正确的，但“5,8”应该在“mündlich”下。并且“11,4”应该在“klausur”下。
出了什么问题，因为“Vokalensemle 应该在“Fach”下的下一行，“mündlich”下的“4,7”和“Klausur”下的空白字段。

哦，是的。这是我的 CSS：

table {
    font-family: Montserrat-Medium;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

我希望你能找到我的问题的解决方案。如果您需要任何了解，请告诉我。

【问题讨论】：

你输入的只是<td>..你不介意<tr>。

标签： javascript html css html-table

【解决方案1】：

      var y = document.createElement("TR");
      y.setAttribute("id", [subject_name]);

      //Spalten in einer Zeile

      var cE = document.createElement("TD");
      var tE = document.createTextNode([subject_name]);
      cE.appendChild(tE);
      y.appendChild(cE);

      var a = document.createElement("TD");
      var b = document.createTextNode([mdl]);
      a.appendChild(b);
      y.appendChild(a);

      var c = document.createElement("TD");
      var d = document.createTextNode([klu]);
      c.appendChild(d);
      y.appendChild(c);


      document.getElementById("grades_table").appendChild(y);

【讨论】：

【解决方案2】：

我在您的代码中看不到您为新表格单元格添加新父表格行的位置。

如果单元格在新行中，则单元格将与相同数量的表格单元格对齐。

追加一个新的tr 并将新的td 单元格添加到其中。

如果您需要每行有奇数个单元格，则需要使用colspan={number of columns cell will span over}。

您想要一个代码示例吗？

【讨论】：