javascript - 如何给一个空的 td 上课？

Question

我正在展示一张 table 。此表的某些单元格已填充内容。但是有些单元格是空的。我想要的是所有空单元格都有不同的背景颜色。我怎样才能做到这一点？如何检查 td 是否为空？

Answer 1

您可以使用 :empty选择器:

演示:

//You can loop and remove the space charcater from cells
document.querySelectorAll('table tr > td').forEach(c => c.textContent = c.textContent.trim());

table, th, td {
  border: 1px solid black;
}
table tr > td:empty {
  background-color: yellow;
}

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td></td>
  </tr>
  <tr>
    <td>March</td>
    <td>$90</td>
  </tr>
  <tr>
    <td>May</td>
    <td>&nbsp; </td>
  </tr>
</table>