If no content is present in a cell of an HTML table, alter the row

Question

If no content is present in a cell of an HTML table, alter the row

I am attempting to create a CSS table that changes the row color if any cell in the row is empty. Here's what I have so far:

<style type="text/css">
    td:empty {
        background-color: red;
    }
</style>

Is there a way to change the color of the entire row instead of just the cell?

This is my current table style:

<style type="text/css">
    .tg {
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* Rest of the CSS code for table styling */

My main concerns are:

Does a solution exist for changing row colors based on empty cells?
If a solution exists, can it be incorporated into my current CSS style?
If a solution exists but cannot be implemented with CSS, what alternative approach should I consider?

In addition to these technical questions, I am utilizing Python and Jinja2 templates to generate an HTML table from a Python dictionary. The aim is to highlight the differences between two dictionaries formatted in table form.

I would appreciate input on the best CSS approach for achieving this highlighting effect within the table structure. Thank you!

html css

Answer 1

Answer №1

When working with CSS, it is not possible to target empty cells directly. However, in JavaScript, you can iterate through all the rows in a table, check for any empty cells, and then add a specific class to highlight those rows.

var rows = document.querySelectorAll('tr');

[...rows].forEach((r) => {
   if (r.querySelectorAll('td:empty').length > 0) {
      r.classList.add('highlight');
   }
})

.highlight td {
   background: yellowgreen;
}

<table cellspacing="0">
   <tr>
      <td>1</td>
      <td></td>
      <td>3</td>
      <td>4</td>
   </tr>
   <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
   </tr>
   <tr>
      <td>9</td>
      <td>10</td>
      <td></td>
      <td>12</td>
   </tr>
</table>

Answer 2

When working with CSS, it is not possible to target empty cells directly. However, in JavaScript, you can iterate through all the rows in a table, check for any empty cells, and then add a specific class to highlight those rows.

var rows = document.querySelectorAll('tr');

[...rows].forEach((r) => {
   if (r.querySelectorAll('td:empty').length > 0) {
      r.classList.add('highlight');
   }
})

.highlight td {
   background: yellowgreen;
}

<table cellspacing="0">
   <tr>
      <td>1</td>
      <td></td>
      <td>3</td>
      <td>4</td>
   </tr>
   <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
   </tr>
   <tr>
      <td>9</td>
      <td>10</td>
      <td></td>
      <td>12</td>
   </tr>
</table>

If no content is present in a cell of an HTML table, alter the row

Answer №1

Similar questions

Challenges arise when utilizing the foundation 6 grid for image overlays within a React application

Grid-based layout for Bootstrap modal windows

Is there a different way to retrieve the tag name of an element besides using

Modify the text inside a div based on the navigation of another div

Enhance your iPad's design with a stylish div box-shadow

Obtain the precise X and Y coordinates of a <li> element regardless of where the mouse is clicked using Typescript

Aligning elements within a table to ensure consistency with surrounding content

What is the best way to ensure the options/choices div reaches its ideal width?

Reasons why text does not show color when a style element is applied

Utilize the power of MYSQL and PHP in conjunction with an HTML form to

Using Flutter to return an HTML response rather than JSON

Modify all the content within the DIV using Regex, while keeping the HTML tags intact

How to optimize form fields in Bootstrap by utilizing the size/maxlength attributes in HTML inputs

The external hyperlink is not functional in Firefox and Chrome browsers, but it operates properly in Internet Explorer 9

Using jQuery, is it possible to retrieve the product name and image dynamically?

Enhancing the smoothness of parallax scrolling

Problem with word-spacing in Safari versions 6.1 and 7.0 when using text-align:center

Reorganize divisions using Bootstrap

What could be the reason that the style tag present in this SVG is not impacting any of the elements?

javascript guide to dynamically update the glyphicon based on value changes