How to add a background color to table row based on data in table cell?

user_6875227 0
Viewed 1120

I am using Angular *ngFor directive to generate my dynamic table. Here is the structure below : 

         <tr class="tr1" *ngFor="let participant of allParticipants">

            <td class="participant-properties">{{participant.stakeholderId}}</td>

            <td class="participant-properties">{{participant.name}}</td>

            <td class="participant-properties">{{participant.rating}}</td>

         </tr>

enter image description here

Above table load when I go to that specific page. Above mentioned tr, last table data (td) has there values for rating:active .rejected and warn. I want to color the entire table row which has the value active in green, warn in yellow and rejected in red at the time of display it.

angular css html jquery javascript
3 Answers

You can create a class for each style, like so:

tr.active td {
  background-color: #ddffdd;
}

tr.warn td {
  background-color: #ffffbb;
}

tr.rejected td {
  background-color: #ffdddd;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  padding: 3px;
}

And then apply the class using ngClass, like so:

<tr class="tr1" *ngFor="let participant of allParticipants" [ngClass]="participant.rating">

Here is a Stackblitz example

user_27809430

this should work for you:

$("table tr").find('td:last').each(function(){
    let td = $(this);
    let text = td.text();
    let color = 'white';
    switch (text) {
        case 'rejected': color = 'red'; break;
        case 'warn': color = 'orange'; break;
        case 'active': color = 'green'; break;
    }

    td.css('backgroundColor', color);
});
user_92826760

You can use [ngStyle] to bind to a method which would return the appropriate color.

In the template add the [ngStyle] to the <tr>:

<tr class="tr1" *ngFor="let participant of allParticipants" [ngStyle]="getBgColor(participant.rating)">

    <td class="participant-properties">{{participant.stakeholderId}}</td>

    <td class="participant-properties">{{participant.name}}</td>

    <td class="participant-properties">{{participant.rating}}</td>

</tr>

In the controller you can use a switch case or a Map to check the condition and return the appropriate style as an Object to the [ngStyle] binding in the template.

getBgColor(rating: string){
    switch(rating)
    {
      case'active':
       return {'background':'#b3ffcc'};
      case 'warn':
       return {'background':'#ffffb3'};
      case 'rejected':
       return {'background':'#ffb3b3'};
    }
 }

Here is a stackblitz demo: https://stackblitz.com/edit/angular-4gb9vh

user_38887660
Related