javascript 为什么都< tr>< thead>是调用createTHead后进去的

juud5qan  于 2023-01-01  发布在  Java
关注(0)|答案(1)|浏览(109)

我有一个关于此代码的问题:

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

插入table中的所有行(不是header中的行)都将插入<thead>中。为什么?
为什么不使用<tbody>(或者至少不使用<thead>,因为我使用的不是thead.insertRow(),而是table.insertRow();
cf第一代

cbwuti44

cbwuti441#

因为你没有创建一个<tbody>,所以你在<thead>中插入all,同时添加tbody const tbody = table.createTBody(),然后在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>

相关问题