Bootstrap Template

by kwabs Ohh

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="tblData" class="table table-striped">
</table>
<table id="tblFooter" class="table table-striped">
  <tr ID="amber">
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
  </tr>
  <tr ID="red">
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
    <td>10</td>
  </tr>
</table>

CSS

table {
  text-align: center;
}

JavaScript

var $tableData = $('#tblData');
var $tableFooter = $('#tblFooter');

function colorCells() {
  $('#tblData td').each(function() {
    var colOfThisTD = $(this).parent().children().index($(this));
    var amberVal = parseInt($('#amber td:eq(' + colOfThisTD + ')').html());
    var redVal = parseInt($('#red td:eq(' + colOfThisTD + ')').html());
    var valOfThisTD = parseFloat($(this).html()).toFixed(2);
    // change color of cell depending of value
    if (valOfThisTD <= amberVal) {
      $(this).css({
        "color": "green"
      });
    } else if (valOfThisTD > amberVal && valOfThisTD <= redVal) {
      $(this).css({
        "color": "#FF8C00"
      });
    } else if (valOfThisTD > redVal) {
      $(this).css({
        "color": "red"
      });
    }
  });
} // End colorCells