rackPlanz

by khemikal

HTML

<table class="table-style" id="rackPlan0">
  <tbody>
    <tr>
      <th>Store Trait</th>
      <th>PROTO A </th>
      <th>PROTO B </th>
      <th>PROTO C </th>
      <th>PROTO D </th>
      <th>PROTO E </th>
      <th>PROTO F </th>
      <th>PROTO G </th>
      <th>PROTO H </th>
      <th>PROTO I </th>
      <th>PROTO J </th>
      <th>PROTO K </th>
      <th>PROTO L </th>
      <th>PROTO M </th>
      <th>PROTO N </th>
      <th>PROTO O </th>
      <th>PROTO P </th>
      <th>PROTO Q </th>
      <th>PROTO R </th>
      <th>PROTO S </th>
      <th>Total</th>
    </tr>
    <tr class="storeCount">
      <td>Store Count</td>
      <td class="protoA">5</td>
      <td class="protoB">8</td>
      <td class="protoC">39</td>
      <td class="protoD">110</td>
      <td class="protoE">329</td>
      <td class="protoF">408</td>
      <td class="protoG">642</td>
      <td class="protoH">542</td>
      <td class="protoI">393</td>
      <td class="protoJ">309</td>
      <td class="protoK">291</td>
      <td class="protoL">171</td>
      <td class="protoM">302</td>
      <td class="protoN">120</td>
      <td class="protoO">166</td>
      <td class="protoP">67</td>
      <td class="protoQ">18</td>
      <td class="protoR">10</td>
      <td class="protoS">5</td>
      <td class="totalRow">3,935</td>
    </tr>
    <tr class="runningStore">
      <td class="totalText">Running Store Ct</td>
      <td class="protoA">5</td>
      <td class="protoB"></td>
      <td class="protoC"></td>
      <td class="protoD"></td>
      <td class="protoE"></td>
      <td class="protoF"></td>
      <td class="protoG"></td>
      <td class="protoH"></td>
      <td class="protoI"></td>
      <td class="protoJ"></td>
      <td class="protoK"></td>
      <td class="protoL"></td>
      <td class="protoM"></td>
      <td class="protoN"></td>
      <td class="protoO"></td>
      <td class="protoP"></td>
      <td class="protoQ"></td>
      <td class="protoR"></td>
      <td class="protoS"></td>
      <td...

CSS

.table-style {
  background: white;
  border-radius: 3px;
  border-collapse: collapse;
  margin-top: 15px;
  /*height: 320px;*/
  /*margin: auto;*/
  /*max-width: 600px;*/
  /*padding: 5px;*/
  /*width: 100%;*/
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}

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

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: #666B85;
  font-size: 12px;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}

tr:hover td {
  background: #444;
  color: #FFFFFF;
  border-top: 1px solid #22262e;
  border-bottom: 1px solid #22262e;
}

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

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

tr:nth-child(odd) td {
  /*background:#EBEBEB;*/
}

tr:nth-child(odd):hover td {
  background: #444;
}

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

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

td {
  background: #FFFFFF;
  padding: 5px;
  text-align: left;
  vertical-align: middle;
  font-weight: 300;
  font-size: 12px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}

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

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

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

th.text-right {
  text-align: right;
}

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

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

td.text-right {
  text-align: right;
}

JavaScript

var firstVal = $('#rackPlan0 > tbody > .storeCount > .protoA').text();
$('#rackPlan0 > tbody > .runningStore > .protoA').html(firstVal);

$('#' + value + ' .runningStore').each(function() {
  $.each(this.cells, function() {
    var index = $(this).index() + 1;
    var prevRow = $(this).closest('tr').prev().find('td:nth-child(' + index + ')');
    if (!isNaN(parseInt(prevRow.text()))) {
      var td1 = parseInt(prevRow.text());
    }
    if (!isNaN(parseInt($(this).prev().text()))) {
      var td2 = parseInt($(this).prev().text());
    }
    var sum = (td1 + td2);
    $(this).html(td1);
  });
});