Question

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

如果不手动篡改HTML，如何在THead下面创建一个TBody元素呢？

Answer 1

来自DOM Level 1 spec

界面 HTMLTableElement

表上的create和delete方法允许作者构造   并修改表格。 HTML 4.0指定   只有CAPTION中的一个，   THEAD和TFOOT元素可能存在于   一张桌子。因此，如果存在，和   createTHead（）或createTFoot（）   方法被调用，方法返回   现有的THead或TFoot元素。

因此createTHead和createTFoot是方便的方法，不一定做实际的创建。

相比之下，表格元素可以包含任意数量的<tbody>，因此不需要特殊方法，而HTMLTableElement.appendChild(document.createElement('tbody'))可以完成整个作业。

Answer 2

一旦创建了THead元素，使用HTMLTableElement.insertRow（）添加到表中的以下所有行都将添加到THead元素中。

我偶然发现了相同的行为，也找不到名为HTMLTableElement.createTBody()的函数（该函数不存在）。

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

因此解决方案是（首先在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>

文档：

HTML

JavaScript

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

Answer 3

createTBody()似乎还没有documented，但它至少在今天存在并且可以按预期工作：

let table = document.createElement('table');
console.log('empty table: ', table.outerHTML);
table.createTBody();
console.log('table with tbody: ', table.outerHTML);

预期输出：

empty table:  <table></table>
table with tbody:  <table><tbody></tbody></table>

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

3 个答案: