Why all go in after calling a createTHead

Question

I have a question regarding this code:

const table = document.createElement("TABLE");
const thead = table.createTHead();
const tr = thead.insertRow();
const th1 = tr.insertCell();
th1.textContent = "header1";
const th2 = tr.insertCell();
th2.textContent = "header2";

const tr2 = table.insertRow();
const td1= tr2.insertCell();
td1.textContent = "field1";
const td2 = tr2.insertCell();
td2.textContent = "field2";

document.getElementById("main").appendChild(table);

All rows insert in table (not in header) go in <thead>. Why?

Why they are not going in a <tbody> (or a least outside of this <thead> as I am not doing a thead.insertRow() but a table.insertRow();

cf https://jsfiddle.net/n1b87vt3/

amel · Accepted Answer

Because you didn't create a <tbody>, so you insert all in <thead>. Add also tbody const tbody = table.createTBody() then insert the new row in it tbody.insertRow():

  const table = document.createElement("TABLE");
  const thead = table.createTHead();
  const tr = thead.insertRow();
  const th1 = tr.insertCell();
  th1.textContent = "header1";
  const th2 = tr.insertCell();
  th2.textContent = "header2";

  const tbody = table.createTBody();
  const tr2 = tbody.insertRow();
  const td1= tr2.insertCell();
  td1.textContent = "field1";
  const td2 = tr2.insertCell();
  td2.textContent = "field2";

  document.getElementById("main").appendChild(table);

td {
  border: 1px solid black;
}

thead {
  color: red;
}

<html>
<body>
<div id="main">
</div>
</body>
</html>

Why all <tr> go in <thead> after calling a createTHead

Tags:

javascript

html-table

Benjamin

1 Answers

amel

Recent Activity

Donate For Us