我有一个问题,因为我想将一些 td
包含在 tr
中,所以我需要知道:
哪些 DOM 元素可以成为 tr
的子元素?(我知道 div
不能)。
W3C规定了这些内容。关于tr
,您可以在这里找到。基本上,只有th
和td
元素可以是直接的tr
内容。
如果您想要表格中的其他内容,它必须放在td
或th
元素内部。例如,td
可以包含流元素,包括div
。
这种情况与我之前在Can we use any other TAG inside <ul> along with <li>?中详细描述过的ul
非常相似,因此我建议您先阅读那篇文章。
值得注意的是,ASCII空格不形成文本节点,而任何非空格字符都会形成非法文本节点,这些节点不能成为table
的子节点。
然后,在当前标准https://html.spec.whatwg.org/multipage/tables.html#the-table-element中的tr
的“内容模型”中,我们可以看到:
内容模型: 零个或多个
td
、th
和支持脚本的元素。
td
和th
,如paxdiablo的答案所解释的那样。<!doctype html>
<table border>
<tr><td>foo <td>bar
</table>
<script>
var p = document.createElement('div');
p.innerHTML = 'Hello world!';
document.getElementsByTagName('tr')[0].appendChild(p);
</script>
这将使一个 div
元素成为 tr
元素的子元素。甚至可以创建一些 td
元素,并使它们成为 div
元素的子元素。
这是否有意义,以及它是否可能会混淆浏览器是一个不同的问题。而且浏览器不会解析通常的 HTML 标记,其中例如 tr
元素包含一个 div
元素作为子元素 - 解析器没有准备处理这种情况。在 HTML 标记中,无法对 td
元素进行分组(除了使它们成为 tr
的子元素之外)。但是在 DOM 中,您可以创建奇怪的树。
如果只想以特殊方式处理一些 td
元素,请给它们一个 class
。
<tr>
元素可以同时包含两者。 - Alohci<!ELEMENT TR - O (TH|TD)+ -- table row -->
。但是你误读了参考资料;它写的是“零个或多个:一个td元素或者一个th元素”。请注意冒号的位置。它是(一个td元素或一个th元素)零次或多次。不管怎样,这是一个方便的测试方式,可以通过验证器进行检查。 - Alohci