test 5 average

by khemikal

HTML

<table class="table-style" id="rackPlan1">
  <thead>
    <tr>
      <th>Category Group</th>
      <th>Category</th>
      <th>Fineline</th>
      <th>Supplier</th>
      <th>CC</th>
      <th>SC</th>
      <th>Set Strategy</th>
      <th>Landed Cost</th>
      <th>FF%</th>
      <th>Cost w/FF</th>
      <th>Retail $</th>
      <th>MU%</th>
      <th>In Str Wk</th>
      <th>Start Wk</th>
      <th>End Wk</th>
      <th>MD Wk</th>
      <th>Fixture</th>
      <th>Brand</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>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="catGrp">BOTTOMS</td>
      <td>CASUAL PANTS</td>
      <td class="parent1">229 GE OPP PANT</td>
      <td></td>
      <td>0</td>
      <td>1</td>
      <td>10-30</td>
      <td>$0.00</td>
      <td>0.00%</td>
      <td>$0.00</td>
      <td>$0.00</td>
      <td>0.00%</td>
      <td>201551</td>
      <td>201601</td>
      <td>201619</td>
      <td>201620</td>
      <td>4WAY</td>
      <td></td>
      <td class="protoA">1.00</td>
      <td class="protoB">1.00</td>
      <td class="protoC">1.00</td>
      <td class="protoD">1.00</td>
      <td class="protoE">1.00</td>
      <td class="protoF">1.00</td>
      <td class="protoG">1.00</td>
      <td class="protoH">1.00</td>
      <td class="protoI">1.00</td>
      <td class="protoJ">1.00</td>
      <td class="protoK">1.00</td>
      <td class="protoL">1.00</td>
      <td class="protoM">1.00</td>
      <td class="totalRow">13</td>
    </tr>
    <tr>
      <td class="catGrp">BOTTOMS</td>
      <td>CASUAL PANTS</td>
      <td class="parent1">229 GE OPP PANT</td>
      <td></td>
      <td>0</td>
      <td>1</td>
      <td>40-90</td>
      <td>$0.00</td>
      <td>0.00%</td>
     ...

CSS

.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;
  background: #333;
  border-bottom: 4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size: 10px;
  font-weight: 100;
  text-align: left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
  padding: 5px;
  min-width: 61px;
  max-width: 250px;
}

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: 5px;
  font-weight: 400;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}

tr:hover td:not(.parent) {
  /*background: #444;*/
  background: #55BB55;
  color: #FFF;
  border-top: 1px solid #22262e;
  border-bottom: 1px solid #22262e;
}

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;
}

#rackPlan1 .subTotal > td {
  color: #000;
  /*background: #D5DDE5 !important;*/
  text-align: left;
}

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;
}

#rackPlan1 .totalRow {}

#rackPlan1 .sub0,
#rackPlan1 .catGrpSub,
th.text-right,
td.text-right {
  text-align: right;
}

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

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

#rackPlan0 {
  margin-left: 1035px;
}

@media print {
  @page {
    size: landscape;
    margin: 0;
  }
  body {
    left: 0;
    overflow: visible;
    background-color: #FFF;
    margin: 0;
  }
  #sidebar {
 ...

JavaScript

function getAverage(a, b) {
   var $this, $content, tdTxt, theAvg;
   var sum = 0;
   var count = 0;
   $(a).each(function() {
     $this = $(this); // cache $(this)
     $content = $this.html();
     tdTxt = parseFloat($this.text(), 10) || 0;
     if ($this.hasClass(b)) {
       theAvg = parseFloat((sum / count), 10) || 0;
       $this.text((theAvg).toFixed(2));
       sum = 0;
       count = 0;
     } else {
       sum += parseFloat(tdTxt);
       if ($content == '') {} else {
         ++count;
       }
     }
   })
 }
 $(function doIt() {
  var el1 = $('#rackPlan1 > thead > tr > th:gt(17):not(.totalRow)');
            var x = el1.length;
            var starter = 19;
            for (i = 0; i < x; i++) {
                $('#rackPlan1 > tbody > tr > td:nth-child(' + starter + ')').each(function () {
                    getAverage('#rackPlan1 > tbody > tr > td:nth-child(' + starter + ')', 'subTotal');
                })
                starter += 1;
            }
 })