：tbody 标签上的空选择器

Question

给出下表：

<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吗？

Answer 1

不，不幸的是，在这种情况下，

tbody

中的缩进和换行符阻止它与

:empty

匹配。这适用于 CSS 和 jQuery，据我所知

:empty

的行为相同，以及 jQuery 的

:parent

，相当于

:not(:empty)

（very 糟糕的选择名）。

此外，您不能使用 CSS

content

向 DOM 中添加元素。您需要在 jQuery 或服务器端执行此操作：检查

tbody

是否有任何行，如果没有，请添加该行。

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

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

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

Answer 2

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

：空

:empty 伪类表示任何没有子元素的元素 全部。只有元素节点和文本（包括空格）是 经过考虑的。注释或处理指令不影响是否 元素是否为空。

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

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

Answer 3

如果你想使用

:empty

那么你需要像这样给出 tbody 语法：

<tbody></tbody>

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

按照我告诉你的那样定义

tbody

。 您也可以使用

.html()

来检查条件：

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

参考： 如何使用 jQuery 检查 HTML 元素是否为空？

Answer 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>');

Answer 5

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

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

Answer 6

使用

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

然后检查你得到了什么。

Answer 7

2023年只有CSS：

    tbody:not(:has(>tr)) {
      position: relative;
      height: 10em;
    }

    tbody:not(:has(>tr)):before {
      display: block;
      position: absolute;
      content: 'message foo';
      color: #aaa;
      top: calc(50% - 0.5em);
      left: 50%;
      transform: translate(-50%, -50%);
    }

Answer 8

检查这个：

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