colored rating scale

colored rating scale

by thorpw

HTML

<table class="table table-condensed table-hover table-striped">
  <thead style="color: #FFFFFF; font-size:11px; height: 15px; background-color: #008080;">
    <tr>
      <th style="border-color: #FFFFFF;border:solid 1px #FFFFFF; text-align: center; vertical-align: middle; background-color: #00a3a3;">Therapeutic Area</th>
      <th style="border-color: #FFFFFF;border:solid 1px #FFFFFF; text-align: center; vertical-align: middle; background-color: #00a3a3;">#Studies</th>
      <th style="border-color: #FFFFFF;border:solid 1px #FFFFFF; text-align: center; vertical-align: middle; background-color: #00a3a3;">% SIV >90% of Contract to-date</th>
      <th style="border-color: #FFFFFF;border:solid 1px #FFFFFF; text-align: center; vertical-align: middle; background-color: #00a3a3;">% Rand >90% of Contract to-date</th>
      <th style="border-color: #FFFFFF;border:solid 1px #FFFFFF; text-align: center; vertical-align: middle; background-color: #00a3a3;">% Milestones met</th>
      <th style="border-color: #FFFFFF;border:solid 1px #FFFFFF; text-align: center; vertical-align: middle; background-color: #00a3a3;">% Non-Recruiting Sites @≥6m</th>
      <th style="border-color: #FFFFFF;border:solid 1px #FFFFFF; text-align: center; vertical-align: middle; background-color: #00a3a3;">Average Days on Site</th>
      <th style="border-color: #FFFFFF;border:solid 1px #FFFFFF; text-align: center; vertical-align: middle; background-color: #00a3a3;">% MVR ≤ 10 days</th>
    </tr>
  </thead>
  <tbody>
    <thead style="color: #FFFFFF; font-size:10px; height: 10px; text-align: center;  background-color: #00a3a3;">
      <tr>
        <th style="border-color: #FFFFFF;border:solid 1px #FFFFFF; text-align: center; vertical-align: middle;"></th>
        <th style="border-color: #FFFFFF;border:solid 1px #FFFFFF; text-align: center; vertical-align: middle;"></th>
        <th style="border-color: #FFFFFF;border:solid 1px #FFFFFF; text-align: center; vertical-align: middle;">Yesterday</th>
       ...

CSS

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
.vGood {
  background-color: green;
}

.good {
  background-color: blue;
}

.avg {
  background-color: amber;
}

.poor {
  background-color: red;
}

JavaScript

$(document).ready(function() {
      $(function() {

          if ($('tr > td:eq(1)')) {
            $('tr > td:eq(2)').each(function(index) {
                var scale = [
                  ['vPoor', 10],
                  ['poor', 50],
                  ['avg', 250],
                  ['good', 1250]
                  ];
                  var score = $(this).text();
                  for (var i = 0; i < scale.length; i++) {
                    if (score <= scale[i][1]) {
                      $(this).addClass(scale[i][0]);
                    }
                  }
                })
            }
          });
      });