Как присвоить класс пустой ячейке?

Question

[Станислав]

Как присвоить класс ячейке, в которой пусто или есть один пробел?

<table cellspasing=0>
    <tr>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <tr>
      <td></td>
      <td> </td> 
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
    </tr>
  </table>

table {
  border-collapse: collapse;
}
td {
  border: solid 1px #ccc;
  padding: 1rem;
}
td.active {
  background: #ccc;
}

let cell = document.querySelectorAll('td');

function addColor(str) {
  if (cell.length === 1 || cell === "" || cell === " ") {
    cell.classList.add('active');
  } else {
    console.log('No!')
  }
}
addColor();

Answer 1

[Вадим]

эм..
ладно. Начнём с простого.
Если бы не пустой пробел, то можно было бы через css решить с помощью псевдоселектора :empty.
По поводу js кода, а что Вы проверяете в условии? Может ли html коллекция быть пустой строкой или строкой с пробелом?

let cells = document.querySelectorAll('td');
cells.forEach( cell => {
 if (!cell.textContent.trim()) { // если содержимое ячейки состоит только из пробелов или пустая строка, то добавляем класс active
    cell.classList.add('active')
  }
})

Comments

[Станислав]

Спасибо что объяснили, теперь понял