如何使用纯 JavaScript 在表中创建 TBody 标签？

How do I create the TBody tag in a Table with pure JavaScript?

提问by Hubro

How is a TBody tag created within a Table tag using pure JavaScript? (No manual tampering with HTML code). There is the HTMLTableElement.createTHead()and HTMLTableElement.createTFoot()functions, but no functions concerning the TBody element. To add to this, once you've created a THead element, all the following rows added to the table using HTMLTableElement.insertRow()are added to the THead element.

如何使用纯 JavaScript 在 Table 标签中创建 TBody 标签？（无需手动篡改 HTML 代码）。有HTMLTableElement.createTHead()和HTMLTableElement.createTFoot()函数，但没有与 TBody 元素相关的函数。为此，一旦您创建了 THhead 元素，添加到表中的所有以下行都将HTMLTableElement.insertRow()添加到 THhead 元素中。

How then would you go about creating a TBody element below the THead without manually tampering with the HTML?

那么您将如何在不手动篡改 HTML 的情况下在 THhead 下方创建一个 TBody 元素？

回答by Alohci

From the DOM Level 1 spec

来自DOM Level 1 规范

Interface HTMLTableElement

The create and delete methods on the table allow authors to construct and modify tables. HTML 4.0 specifies that only one of each of the CAPTION, THEAD, and TFOOT elements may exist in a table. Therefore, if one exists, and the createTHead() or createTFoot() method is called, the method returns the existing THead or TFoot element.

接口HTMLTableElement

表上的创建和删除方法允许作者构造和修改表。HTML 4.0 指定表中只能存在 CAPTION、THEAD 和 TFOOT 元素中的每一个。因此，如果存在，并且调用 createTHead() 或 createTFoot() 方法，则该方法返回现有的 THead 或 TFoot 元素。

So createTHead and createTFoot are convenience methods that don't necessarily do an actual create.

所以 createTHead 和 createTFoot 是方便的方法，不一定会进行实际的创建。

In contrast, table elements can have as many <tbody>s as you like so thare's no need for a special method, and HTMLTableElement.appendChild(document.createElement('tbody'))will do the complete job just fine.

相比之下，表格元素可以有任意多的<tbody>s，因此不需要特殊的方法，并且HTMLTableElement.appendChild(document.createElement('tbody'))可以很好地完成整个工作。

回答by handle

once you've created a THead element, all the following rows added to the table using HTMLTableElement.insertRow() are added to the THead element.

创建 THhead 元素后，使用 HTMLTableElement.insertRow() 添加到表中的所有以下行都将添加到 THhead 元素中。

I stumbled across the same behavior and could not find a function called HTMLTableElement.createTBody()either (it does not exist).

我偶然发现了相同的行为，但找不到调用的函数HTMLTableElement.createTBody()（它不存在）。

But I found out that insertRow()(or one of the other functions) seems to include table state logic, as it will create <tbody>automatically - unless <thead>has been created already.

但我发现insertRow()（或其他函数之一）似乎包含表状态逻辑，因为它会<tbody>自动创建- 除非<thead>已经创建。

So the solution is (working with Firefox 62.0.2 (64-bit) on Windows 10) to create the table body first and then create the header:

所以解决方案是（在 Windows 10 上使用 Firefox 62.0.2（64 位））首先创建表体，然后创建表头：

var tbl = document.createElement('table');

// tbody
var tr = tbl.insertRow();
var tc = tr.insertCell();
var tt = document.createTextNode("tbody");
tc.appendChild(tt);


// thead
var th = tbl.createTHead();
var thr = th.insertRow();

if (true) {
  // works
  var thc = document.createElement('th');
  thr.appendChild(thc);
} else {
  // does not work
  var thc = thr.insertCell();
}

var tht = document.createTextNode("thead");
thc.appendChild(tht);

// tfoot
var tf = tbl.createTFoot();
var tfr = tf.insertRow();
var tfc = tfr.insertCell();
var tft = document.createTextNode("tfoot");
tfc.appendChild(tft);


// 
document.getElementById('target').appendChild(tbl);

body {
  background-color: #eee;
}

table {
  border: 2px solid white;
}

thead {
  background-color: red;
}

tbody {
  background-color: green;
}

tfoot {
  background-color: blue;
}

th {
  border: 2px solid green;
}

tr {
  /*background-color: #eee;*/
}

td {
  border: 2px solid black;
}

<div id="target"></div>

Docs:

文档：

HTML

HTML

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

JavaScript

JavaScript

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement