CODEWITHSUNDEEP
javascripthtmlcss
Prodesign Webprojekte
Prodesign Webprojekte

Reputation: 23

How to give an empty td a class?

I am displaying a table. Some cells of this table are filled with content. But there are some cells that are empty. What i want is that all empty cells have a different background color. How can i do that? How can i check if a td is empty?

Upvotes: 2

Views: 1078

Answers (2)

Mamun
Mamun

Reputation: 68933

You can use :empty selector:

Demo:

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

Upvotes: 5

Abin Thaha
Abin Thaha

Reputation: 4633

You can use js/jquery to check if a cell is empty or not. Based on that you can add a class and give a background-color to the same.

Or if you want a css only approach, you can use :empty selector. But the problem with :empty is that it will not consider a td an empty one if there is just a few space in it. Check the below snippet.

$(document).ready(function () {
  $("table td").each(function (index, eachCell) {
    if ($(eachCell).html().trim().length === 0) {
      $(eachCell).addClass("empty-cell");
    }
  });
});
.empty-cell {
  background-color: red;
}

td {
  border: 1px solid #ddd;
  padding: 5px;
}


td:empty {
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>      </td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Related Questions