Table content is not below

Question

Here is my HTML table:

<table class="kobel_days_table" id="kobel_days_table" style="display: none;">
                          <tr>
                            <th>Wochentag</th>
                            <th>Datum</th>
                            <th>Thema</th>
                            <th>Kobelwirte</th>
                          </tr>
                        </table>

And with js I am adding the values:

//Zeile erstellen
          var y = document.createElement([doc.id]);
          y.setAttribute("id", [doc.id]);
          document.getElementById("kobel_days_table").appendChild(y);

          //Spalten in einer Zeile

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

          //Spalten in einer Zeile

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

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

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

          var e = document.createElement("TD");
          var f = document.createTextNode(kobel_days_info[3]);
          e.appendChild(f);
          y.appendChild(e);

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

Finally here is CSS:

.kobel_content table {
  border-collapse: collapse;
  width: 100%;
}

.kobel_content th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

Now my problem. Here is a image as understanding helper: https://www.dropbox.com/s/rjxuih67qpgr7o7/bug.PNG?dl=0
The values are not centered under the values. "Montag" should be centered under "Wochentag", "05.03" under "Datum" and so on... But anyway it does not work.
~filip

you're writing "clas", single 's' in the first table markup... just mispelling here or in the code too? — Davide Vitali, Mar 05 '19 at 20:19
Class is missing an s. What is document.createElement([doc.id])? — Olafant, Mar 05 '19 at 20:24
@Olafant doc.id is something like nQwsk5siWOnQcK0RAesI. But it can change anytime. — Filip Degenhart, Mar 05 '19 at 20:25
.insertRow() and .insertCell() are best candidated than .appendChild(). See [link]https://stackoverflow.com/questions/18333427/how-to-insert-row-in-html-table-body-in-javascript — Davide Vitali, Mar 05 '19 at 20:26
What element is that and why do you add it as a child to the table? — Olafant, Mar 05 '19 at 20:29
You're creating an arbitrary tag based on some id and wrapping your `` in it. Just assign the id to the `` itself. https://jsfiddle.net/khrismuc/sjv1yt9e/ — , Mar 05 '19 at 20:33

ostrebler · Accepted Answer · 2019-03-05T20:29:41.810

The problem might be that you're not using <thead> and <tbody> tags. See here.

//Spalten in einer Zeile

var y = document.createElement("TR");
y.setAttribute("id", 'what-id');

//Spalten in einer Zeile

var cE = document.createElement("TD");
var tE = document.createTextNode('test');
cE.appendChild(tE);
y.appendChild(cE);

var a = document.createElement("TD");
var b = document.createTextNode('test');
a.appendChild(b);
y.appendChild(a);

var c = document.createElement("TD");
var d = document.createTextNode('test');
c.appendChild(d);
y.appendChild(c);

var e = document.createElement("TD");
var f = document.createTextNode('test');
e.appendChild(f);
y.appendChild(e);

document.getElementById("kobel_days_table").children[1].appendChild(y);

.kobel_content table {
  border-collapse: collapse;
  width: 100%;
}

.kobel_content th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

<table clas="kobel_days_table" id="kobel_days_table">
  <thead>
    <tr>
      <th>Wochentag</th>
      <th>Datum</th>
      <th>Thema</th>
      <th>Kobelwirte</th>
    </tr>
   </thead>
   <tbody></tbody>
</table>

But how to do that with js, because I am adding the whole body with it? — Filip Degenhart, Mar 05 '19 at 20:20
Thead and tbody tags were not the problem. The problem was creating an invalid element. — Olafant, Mar 05 '19 at 20:44

Table content is not below

1 Answers1