trans

by khemikal

HTML

<table id="test2" class="table-style" style="">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Fineline</th>
      <th>Set Strategy</th>
      <th>FL St WK</th>
      <th>FL End WK</th>
      <th>Fixture Type</th>
      <th>201601</th>
      <th>201602</th>
      <th>201603</th>
      <th>201604</th>
      <th>201605</th>
      <th>201606</th>
      <th>201607</th>
      <th>201608</th>
      <th>201609</th>
      <th>201610</th>
      <th>201611</th>
      <th>201612</th>
      <th>201613</th>
      <th>201614</th>
      <th>201615</th>
      <th>201616</th>
      <th>201617</th>
      <th>201618</th>
      <th>201619</th>
      <th>201620</th>
      <th>201621</th>
      <th>201622</th>
      <th>201623</th>
      <th>201624</th>
      <th>201625</th>
      <th>201626</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>18</td>
      <td>4631 - HANES LS CREW TEE</td>
      <td>10-30</td>
      <td>201601</td>
      <td>201622</td>
      <td>4WAY,H-RACK,undefined</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>18</td>
      <td>4631 - HANES LS CREW TEE</td>
      <td>40-60</td>
      <td>201603</td>
      <td>201624</td>
      <td>4WAY,H-RACK,undefined</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
     ...

CSS

body {
  font: 12px/1 Montserrat, sans-serif;
  color: #333;
}

.table-style {
  background: #FFF;
  border-radius: 3px;
  border-collapse: collapse;
  margin-top: 15px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}

th {
  color: #D5DDE5;
  font-weight: bold;
  background: #333;
  border-bottom: 4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size: 10px;
  text-align: left;
  /*text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);*/
  vertical-align: middle;
  padding: 5px;
}

th:first-child {
  border-top-left-radius: 3px;
}

th:last-child {
  border-top-right-radius: 3px;
  border-right: none;
}

tr {
  border-top: 1px solid #C1C3D1;
  border-bottom: 1px solid #C1C3D1;
  /*color: #333;*/
  color: #666B85;
  /*color: gray;*/
  font-size: 5px;
  font-weight: 400;
  /*text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);*/
}

tr:first-child {
  border-top: none;
}

tr:last-child {
  border-bottom: none;
  background-color: #333;
}

tr:last-child td:first-child {
  border-bottom-left-radius: 3px;
}

tr:last-child td:last-child {
  border-bottom-right-radius: 3px;
}

td {
  background: #FFF;
  text-align: left;
  vertical-align: middle;
  font-weight: 300;
  font-size: 10px;
  /*text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);*/
  border-right: 1px solid #C1C3D1;
  padding: 4px;
}

td:last-child {
  border-right: 0;
}

th.text-left,
td.text-left {
  text-align: left;
}

th.text-center,
td.text-center {
  text-align: center;
}

JavaScript

$('#test2 > tbody > tr').each(function() {
      var a = parseInt($(this).find('td:nth-child(4)').text());
      //console.log("start" + a);
      var b = parseInt($(this).find('td:nth-child(5)').text());
      //console.log("end" + b);
      var wk1 = $(this).find('td:gt(5)');
      //console.log(wk1.length);
      wk1.each(function () {
            var col = $(this).prevAll().length;
            var headerObj = $(this).parents('table').find('th').eq(col);
            console.log(headerObj.text());
            if ((headerObj.text() >= a) && (headerObj.text() <= b)) {
                $(this).css('background-color', '#C6E0B4');
            }
        })
    })