How to add color to an HTML table depending on 3 different conditions

Question

How to add color to an HTML table depending on 3 different conditions

I have set 3 specific colors in my CSS. I have an HTML table and I am looking to have the background color of a cell change based on 3 conditions:

 if the cell contains the text 'True'     - color green
 if the cell contains the text 'False'    - color red
 if the cell contains the text 'None' - color yellow

Here is my CSS:

.color-green {
    background-color: green;
    color: black;
  }

  .color-yellow {
    background-color: orange;
    color: black;
  }
  
  .color-red {
    background-color: red;
    color: black;
}

And here is my HTML:

<td ng-class = "{'color-yellow':dict.status='True','color-red':dict.status=='false'}">{{ dict.status}}</td>

I initially attempted with 2 colors, but it only changed cells with the text 'True' to a red background. I have not worked with HTML in a while, but I recall this method working with numbers. I tried to search online but did not find a solution. Is there a way to achieve this with the 3 colors I have specified?

html css angular

Answer 1

Answer №1

To achieve this goal, the conditional (ternary) operator can be utilized. For more information, refer to: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

The code snippet below demonstrates the use of classes and {{ }} along with the ternary operator. If dict.status.includes('True') returns true, the class will be color-green. If dict.status.includes('False') returns true, the class will be color-red. Otherwise, the class will default to color-yellow.

class = "{{ dict.status.includes('True') ? 'color-green' : dict.status.includes('False') ? 'color-red' : 'color-yellow' }}

.color-green {
    background-color: green;
    color: black;
  }

  .color-yellow {
    background-color: yellow;
    color: black;
  }
  
  .color-red {
    background-color: red;
    color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="">
    Type your text in this box: 
    <input type="text" ng-model="dict.status">
    <table>
        <tr>
            <td class = "{{ dict.status.includes('True') ? 'color-green' : dict.status.includes('False') ? 'color-red' : 'color-yellow' }}">{{ dict.status}}</td>
        </tr>
    </table>
</div>

Answer 2

To achieve this goal, the conditional (ternary) operator can be utilized. For more information, refer to: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

The code snippet below demonstrates the use of classes and {{ }} along with the ternary operator. If dict.status.includes('True') returns true, the class will be color-green. If dict.status.includes('False') returns true, the class will be color-red. Otherwise, the class will default to color-yellow.

class = "{{ dict.status.includes('True') ? 'color-green' : dict.status.includes('False') ? 'color-red' : 'color-yellow' }}

.color-green {
    background-color: green;
    color: black;
  }

  .color-yellow {
    background-color: yellow;
    color: black;
  }
  
  .color-red {
    background-color: red;
    color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="">
    Type your text in this box: 
    <input type="text" ng-model="dict.status">
    <table>
        <tr>
            <td class = "{{ dict.status.includes('True') ? 'color-green' : dict.status.includes('False') ? 'color-red' : 'color-yellow' }}">{{ dict.status}}</td>
        </tr>
    </table>
</div>

Answer 3

Answer №2

If you're looking to style elements dynamically, consider using the [ngClass] directive:

<td [ngClass]="{'color-yellow': dict.status='true', 'color-red': dict.status=='false'}">{{ dict.status }}</td>

This allows you to assign classes to elements based on conditions.

Check out the playground link for more information.

Answer 4

If you're looking to style elements dynamically, consider using the [ngClass] directive:

<td [ngClass]="{'color-yellow': dict.status='true', 'color-red': dict.status=='false'}">{{ dict.status }}</td>

This allows you to assign classes to elements based on conditions.

Check out the playground link for more information.

How to add color to an HTML table depending on 3 different conditions

Answer №1

Answer №2

Similar questions

Is there a way to combine the input tag's name with a growing integer variable?

What is the method for defining a CSS property for the ::before pseudo element within an Angular component?

Tips on displaying an avatar above and outside the boundaries of a background element using Chakra UI

"Unlocking the Power of Ionic: A Guide to Detecting Status 302 URL Redirects

Determine the Placement of Bootstrap Popover by Utilizing SVG and Mouse Coordinates

slow loading background slideshow in css

Pass the form data to the next page with javascript in HTML

What is the best method for accessing a value in IndexedDB while utilizing service workers?

The function onClick in Chart.js allows for passing the selected object in Typescript

What is the best way to include overflow-hidden in the image displayed by the tailblock component?

Ways to gradually transition gradient color when hovering?

Adjust the flex box height to match the dimensions of the image container

What could be causing the inaccuracies in the way my Array data is being transferred to my MySQL

Issue with Angular 2 AOT Compilation when trying to access formArray

Animate the smooth transition of a CSS element when it is displayed as a block using JQuery for a

Error in Angular Template Parsing Due to Dynamic Object Key in Angular Version Greater Than 2

Does Google's caching process differ when using <span> tags instead of <h> tags for headings?

Issue arising from swiper version 8 compatibility with angular version 16

Restrict printing loops within the designated division layer

When adding my Angular web app to the home screen on iOS Safari, the icon appears as a screenshot instead of the specified apple-touch-icon