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

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

[0xD34F]

Где и какой класс будем добавлять:

const table = document.querySelector('здесь селектор вашей таблицы');
const className = 'active';

Добавляем:

table.querySelectorAll('tbody td').forEach(td => {
  td.classList.toggle(className, !td.innerText.trim());
});

или

for (const { rows } of table.tBodies) {
  for (const { cells } of rows) {
    for (const td of cells) {
      if (/^\s*$/.test(td.textContent)) {
        td.classList.add(className);
      }
    }
  }
}

Comments

[Станислав]

Супер! Благодарю!

Answer 2

[Вадим]

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

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

Comments

[Станислав]

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