Ytukyg

I create a table with this HTML Code:

<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>  

And in Javascript I add this things to the table. The function runs every time the server returns new loaded values. Here is the Javascript function:

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

}   

For understanding. The subject value is a number, so I turn it into a String. The result is the subject name. He is something like: "Mathematik" or "Deutsch".

I am getting this:

But that's not correct. The subject_name "Latein" is correct under the "Fach", but "5,8" should be under "mündlich". And the "11,4" should be under "klausur".

What's wrong because the "Vokalensemle should be in the next line again under "Fach", the "4,7" under "mündlich" and the empty field under "Klausur".

Oh yeah. And here is my 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;

}

I hope you find a solution to my Problem. If you need anything to know let me know.

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

I couldn't see in your code where you are adding the new parent table row for your new table cells.

The cells will align if they are within a new row, with the same number of table cells.

Append a new tr and add the new td cells to that.

If you need to have uneven number of cells per row, you will need to use colspan={number of columns cell will span over}.

Would you like a code example?