: пустой селектор на теге tbody

учитывая следующую таблицу:

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

7
css css-selectors html jquery jquery-selectors

7 ответов

нет, к сожалению, отступ и новые строки в 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>");
}
19

в этом случае tbody содержит пробел в качестве содержимого, поэтому он не будет работать

:пусто

: пустой псевдокласс представляет любой элемент, у которого нет дочерних элементов в все. Только узлы элементов и текст (включая пробелы) продуманный. Комментарии или инструкции по обработке не влияют на то, элемент считается пустым или нет.

и содержание: можно использовать только с перед или :после псевдо элементами

свойство CSS содержимого используется с:: before и:: after псевдо-элементы для создания контента в элементе. Вставленные объекты с помощью свойства content анонимно заменяются элементы.

3

если вы хотите использовать :empty тогда вам нужно дать синтаксис tbody как:

<tbody></tbody>

как вы определяете: empty не будет проверять, что, поскольку у него есть новая строка.

определение tbody как я уже сказал вам. Вы также можете использовать .html() чтобы проверить состояние:

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

ссылка: Как проверить, пуст ли элемент HTML с помощью jQuery?

2

на <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>');
2

FYI: вы можете использовать следующий селектор jQuery для выбора таблицы с пустым телом без зависимости от идентификатора элемента таблицы:

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

использовать 

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

а затем проверьте, что вы получаете.

0

проверьте это:

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