: tbody 标签上的空选择器

Posted 2023-03-06

【中文标题】: tbody 标签上的空选择器

【英文标题】：:empty selector on tbody tag

【发布时间】：2013-07-30 03:09:42

【问题描述】：

给定下表：

<table id="incidents">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

使用 jQuery 将以下评估为 false:

$("#incidents tbody").is(":empty")

我想使用 CSS 将内容设置为消息：

#incidents tbody:empty 
    content: "<tr>message foo</tr>";

:empty 选择器可以应用于 tbody 吗？

【参考方案1】：

仅供参考：您可以使用以下 jQuery 选择器来选择具有空 tbody 的表格，而无需依赖表格元素的 id：

$("table:not(:has(>tbody>tr))")

【参考方案2】：

不，不幸的是，tbody 中的缩进和换行符阻止它在这种情况下匹配 :empty。这适用于CSS 和jQuery，据我所知:empty 的行为相同，以及jQuery 的:parent，相当于:not(:empty)（带有very名称选择不当）。

此外，you cannot use CSS content to add elements to the DOM。您需要在 jQuery 或服务器端执行此操作：检查 tbody 是否有任何行，如果没有，则添加该行。

如果你使用 jQuery，你可以使用这个：

var tbody = $("#incidents tbody");

if (tbody.children().length == 0) 
    tbody.html("<tr>message foo</tr>");

【讨论】：

"不，不幸的是，tbody 中的缩进和换行阻止了它的匹配。"谢谢，节省了我一些 CSS 调试时间。

【参考方案3】：

在这种情况下，tbody 包含空白作为内容，所以它不起作用

:empty

:empty 伪类表示任何在 全部。只有元素节点和文本（包括空格）是 经过考虑的。评论或处理指令不影响是否 一个元素是否被认为是空的。

此外，:content 只能与 :before 或 :after 伪元素一起使用

content CSS 属性与 ::before 和 ::after 一起使用 伪元素在元素中生成内容。插入的对象 使用 content 属性是匿名替换元素。

【讨论】：

:before 和 :after 不是伪类。它们是伪元素。它在引文中说得对。

【参考方案4】：

<tbody> 不是空的，因为它包含空格。您必须使用过滤功能来解决这个问题：

$("#incidents tbody").filter(function() 
    return !$.trim($(this).text());
).append('<tr>message foo</tr>');

或者计算孩子的数量：

$("#incidents tbody").filter(function() 
    return !$(this).children().length;
).append('<tr>message foo</tr>');

【参考方案5】：

检查这个：

<table id="incidents">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

【参考方案6】：

使用

$("#incidents tbody").html()

然后检查你得到了什么。

【参考方案7】：

如果您想使用:empty，那么您需要将 tbody 语法指定为：

<tbody></tbody>

正如你所定义的 :empty 不会检查它，因为它有一个新行。

按照我告诉你的定义tbody。 您也可以使用.html() 来检查条件：

if(!$("#incidents tbody").html()) 

参考： How do I check if an HTML element is empty using jQuery?