JSFiddle - React, Tailwind, and code Playground

by lucaslazaro

HTML

<table>
  <thead>
    <tr>
      <th>Head</th>
      <th>Head</th>
      <th>Head</th>
      <th>Head</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- Instead of doing this -->
      <!-- <td style='background-color:"+bgColor+";text-align: center;vertical-align: middle;'>" rating </td> -->
      <!-- You could do this: -->
      <td class="rating" data-rating="3">Rating</td>
      <td class="rating" data-rating="2">Rating</td>
      <td class="rating" data-rating="1">Rating</td>
      <td class="rating" data-rating="">Rating</td>
    </tr>
  </tbody>
</table>

CSS

.rating {
  text-align: center;
  vertical-align: middle;
}

.rating.bg-default {
  background-color: transparent;
}

.rating.bg-green {
  background-color: #74fe36;
}

.rating.bg-yellow {
  background-color: #ffff00;
}

.rating.bg-red {
  background-color: #ff0000;
}

@media print {  
  // Specific for print
  
  .rating {
    -webkit-print-color-adjust: exact;
  }
  
  .rating.bg-default {
    background-color: transparent;
  }

  .rating.bg-green {
    background-color: #74fe36;
  }

  .rating.bg-yellow {
    background-color: #ffff00;
  }

  .rating.bg-red {
    background-color: #ff0000;
  }
}

JavaScript

function returnPrntDynaColorClass(metricVal){
	switch (metricVal) {
  	case 3: return 'bg-green';
    case 2: return 'bg-yellow';
    case 1: return 'bg-red';
    default: return 'bg-default';
  }           
}

$('td.rating').each(function() {
	console.log($(this));
	var rating = $(this).data('rating');
	var ratingClass = returnPrntDynaColorClass(rating);
  $(this).addClass(ratingClass);
});