正在插入神秘的tbody标签

我正在处理一个自定义组件，我从一个项目逐字逐句地借用了另一个项目的代码。以下是问题区域：

<style>
#history tr:nth-child(even) {background-color: #f2f2f2;}
</style>
<div class="ce-card" style="height:280px;overflow:auto;" id="myscroller">
<table id="history" style="width:100%">
</table>
</div>

然后在后面的表格中添加以下内容：

this.shadowRoot.querySelector('#history').innerHTML += `<tr><td>Term ${this._term}: ${text}</td></tr>`;

所有这些都有效。然而，我没有得到我的交替高亮显示，因为在项目2中，行被<tbody></tbody>标记包裹。我在任何地方都不使用tbody，但它只出现在我正在玩的新页面上。将innerHTML设置为具有<tr>时，如何抑制插入<tbody>标记？

我知道有人会问使用=而不是+=会发生什么。它也有同样的问题。

总结：xxx.innerHTML = `<tr><td>text</td></tr>`在不同的项目中产生了不同的结果。以下两种之一：

<table><tr><td>text</td></tr></table>
<table><tbody><tr><td>text</td></tr></tbody></table>

编辑：

根据我在评论中看到的内容，如果我通过附加HTML来附加多行，我应该得到以下内容：https://i.stack.imgur.com/vBQEW.png

但似乎没有任何办法不让它与。。。除了在另一页上发生的事情(显然是偶然的(。

此表的创建方式完全相同：https://i.stack.imgur.com/Kur1d.png也许更好的问题是"；我第一次是怎么做到的？我在CSS中设置了什么，或者什么东西抑制了tbody的插入">

浏览器推断是否存在<tbody>。你不能删除它。

需要记住的一件事是，自网络出现以来，人们一直在编写破碎的HTML。浏览器制造商选择通过让浏览器做而不是让页面作者半途而废来解决这个问题。

试试这个实验。

创建一个空白HTML页面，如下所示：

<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td>one</td>
</tr>
</table>
</body>
</html>

在浏览器中打开该页面，并使用开发工具对其进行检查。您将看到<tbody>

Q：为什么不断添加新的<tbody>元素

如前所述，浏览器推断<tbody>的存在。但为什么呢？

~~因为DOM不允许CCD_ 11是CCD_~~

让我有点惊讶的是，DOM规范确实允许<tr>是<table>的直接后代。以下是确切的文本(重点是我的(：

内容模型：
按此顺序：可选caption元素，然后是零个或多个colgroup元素，然后可选thead元素，然后零个或更多tbody元素或一个或多tr元素，然后可选地是tfoot元素，可选地与一个或更多脚本支持元素混合。

我的理解是规范允许这样做：

<!-- Snippet 1: row wrapped in tbody -->
<table>
<tbody>
<tr> <td> cell </td> </tr>
</tbody>
</table>

或者这个：

<!-- Snippet 2: row as direct child of table -->
<table>
<tr> <td> cell </td> </tr>
</table>

但是不是这个：

<!-- Snippet 3: mixed-case, table with both tbody and row children -->
<table>
<tbody>
<tr> <td> cell </td> </tr>
</tbody>

<tr> <td> cell </td> </tr>
</table>

很明显，现代浏览器会推断出<tbody>的存在，因此Snippet#2会自动转换为Snippet#1。这意味着任何额外的<tr>都将自动包装在<tbody>中，以避免Snippet#3。

当我在一个带有表的纯HTML页面中尝试此操作时，我得到了与您相同的结果。

这是大多数浏览器的正常行为。它是在处理DOM的过程中插入的浏览器。有关更多详细信息，请参阅官方MDN。抑制<tbody>是不可能的，也许你可以用另一种方法。在CSS中使用#history > tbody > tr:nth-child(even)怎么样？首先在JAVASCRIPT中将所有tr收集在一个字符串中，然后使用innerHTML将其添加到#history中

更新答案：

由于这里的意图是不断地增加"；历史"；表中，以下应该更合适：

从合适的标记(包括<tbody>元素(开始
使用DOM元素方法CCD_ 30新创建一个新的CCD_
然后将所有必需的CCD_ 32填入该CCD_
CCD_ 34-将其发送到CCD_ 35-目标

const tbd=document.querySelector("#history tbody");
"abc".split("").forEach((v,i)=>appendEl(tbd,"tr",
`<td>Term ${i+1}:</td><td>${v}</td>`));
function appendEl(trgt,type,html){
const el=document.createElement(type);
el.innerHTML=html;
trgt.append(el);
}
// And here is another "late" addition to the table:
appendEl(tbd,"tr",
`<td>last term:</td><td>"the end"</td>`);

<table id="history"><tbody></tbody></table>

appendEl()是一个小实用函数，它帮助我为每个<tr>执行上述步骤。jQuery有一个内置的方法append()，非常适合这个工作。遗憾的是，没有直接的VanillaJS等效方法，但appendEl()的工作方向是相同的。

这样做可以避免重新解析已经存在的表内容。这将使整个过程更快、更稳定(任何以前附加的事件侦听器或更改的输入值都不受其影响(。

相关内容

最新更新

热门标签：