Как стилизовать пустые ячейки таблицы?

Question

[Станислав]

Есть таблица:

<table>
  <tr>
    <td>текст</td>
    <td>текст</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Есть стили:

td {
    background: #fff;
}
td.empty {
    background: #eee;
}

Нужно добавить класс пустым ячейкам, но так добавляется всем:

var tde = $('td');

if  ($('tde').html() !== '') {
    tde.addClass('empty');
} else {
    tde.removeClass('empty');
}

Answer 1

[Андрей Хохлов]

Можно без js: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Comments

[Станислав]

Спасибо большое, согласен, но у меня это не работало из-за пробелов, как выяснилось

Answer 2

[Виктор]

$(tde).text() === ''

$('td').each(function() {
    if ( $(this).text() === '' ) {
       $(this).addClass('empty');
    }
});

Comments

[Станислав]

Спасибо большое! Как выяснилось, там у меня пробелы прилипали, немножко подредактировал:

$(function () {
    $('td').each(function() {
        if ($(this).html() === ' ' ) {
           $(this).addClass('empty');
        }
    });
});

Answer 3

[Александр Васильев]

tde - уже набор, получить из набора еще один после if - не верный путь