html :tbody标记上的空选择器

bvjxkvbb  于 2023-05-15  发布在  其他
关注(0)|答案(8)|浏览(234)

根据下表:

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

ddrv8njm

ddrv8njm1#

不,不幸的是,tbody中的缩进和换行符使它在本例中无法匹配:empty。这适用于CSS和jQuery,据我所知,:empty的行为相同,以及jQuery的:parent,它相当于:not(:empty)(名称的选择非常糟糕)。
此外,您不能使用CSS content向DOM添加元素。你需要在jQuery或服务器端这样做:检查tbody是否有任何行,如果没有,则添加该行。
如果你使用jQuery,你可以这样做:

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

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

svgewumm2#

在本例中,tbody包含白色作为内容,因此它不会工作
:empty
:empty伪类表示任何没有子元素的元素。只考虑元素节点和文本(包括空白)。注解或处理指令不影响元素是否为空。
此外,:content只能与:before:after伪元素一起使用
content CSS属性与::before和::after伪元素一起使用,以在元素中生成内容。使用content属性插入的对象是匿名替换元素。

wydwbb8l

wydwbb8l3#

如果你想使用:empty,那么你需要给予tbody语法,如:

<tbody></tbody>

因为你已经定义了:empty,所以它不会检查,因为它有一个新的行。
tbody的定义正如我告诉你的。您也可以使用.html()来检查条件:

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

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

xpcnnkqh

xpcnnkqh4#

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

whitzsjs5#

仅供参考:你可以使用下面的jQuery选择器来选择一个tbody为空的表,而不依赖于表元素的id:

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

0s7z1bwu6#

使用

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

然后检查你得到了什么。

qncylg1j

qncylg1j7#

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%);
    }
r6l8ljro

r6l8ljro8#

检查这个:

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

相关问题